React-Native+Idea環境搭建

依賴

• Node
• React Native 命令行工具
• Python2
• JDK 1.8
• Idea

安裝配置

和react-native中文社區一致

• 注意 Node 的版本必須高於 8.3，Python 的版本必須爲 2.x（不支持 3.x），而 JDK 的版本必須是 1.8（目前不支持 1.9 及更高版本）。安裝完 Node 後建議設置 npm 鏡像以加速後面的過程（或使用科學上網工具）。

• 不要使用 cnpm！cnpm 安裝的模塊路徑比較奇怪，packager 不能正常識別！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native 的命令行工具（react-native-cli）

• Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用於執行創建、初始化、更新項目、運行打包服務（packager）等任務。

npm install -g yarn react-native-cli

安裝完 yarn 後同理也要設置鏡像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安裝完 yarn 之後就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install 某第三方庫名。

android 環境搭建

安裝android sdk

在idea中可以通過File->Setting

• 在 SDK platforms 頁面點擊Show Package Details 確認安裝Android platforms 28和 Intel x86 Atom_64 System Image兩個組件。
  
• 在SDK Tool->Android SDK bulid Tool 安裝28.0.3版本

配置環境變量

• 配置 ANDROID_HOME 環境變量
  React Native 需要通過環境變量來了解你的 Android SDK 裝在什麼路徑，從而正常進行編譯。

• 打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建，創建一個名爲ANDROID_HOME的環境變量（系統或用戶變量均可），指向你的 Android SDK 所在的目錄。

• SDK 默認是安裝在下面的目錄：

c:\Users\你的用戶名\AppData\Local\Android\Sdk

• 把 platform-tools 目錄添加到環境變量 Path 中
  打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量，選中Path變量，然後點擊編輯。點擊新建然後把 platform-tools 目錄路徑添加進去。
  此目錄的默認路徑爲：

c:\Users\你的用戶名\AppData\Local\Android\Sdk\platform-tools

在此之前安裝過程中都不會有太大的問題 之後由於部分資源需要翻牆的原因，可能會導致項目運行失敗。

通過Idea創建react-native項目

在首次創建項目運行時，需要下載gradle構建工具，由於網速翻牆等限制，通過Idea 下載時會出錯，導致運行時出現以下報錯：

Exception in thread "main" java.util.zip.ZipException: 
error in opening zip file

• 建議手動下載gradle版本，將下載好的壓縮包放入以下目錄(不需要手動解壓)

C:\Users\xxxxx\.gradle\wrapper\dists\gradle-4.7-all\4cret0dgl5o3b21weaoncl7ys

在gradle正確安裝之後需要更改gradle鏡像地址

• 在gradle安裝目錄創建init.gradle文件，內容如下：

allprojects{
    repositories {
        def ALIYUN_REPOSITORY_URL = 'http://maven.aliyun.com/nexus/content/groups/public'
        def ALIYUN_JCENTER_URL = 'http://maven.aliyun.com/nexus/content/repositories/jcenter'
        all { ArtifactRepository repo ->
            if(repo instanceof MavenArtifactRepository){
                def url = repo.url.toString()
                if (url.startsWith('https://repo1.maven.org/maven2')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_REPOSITORY_URL."
                    remove repo
                }
                if (url.startsWith('https://jcenter.bintray.com/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_JCENTER_URL."
                    remove repo
                }
            }
        }
        maven {
                url ALIYUN_REPOSITORY_URL
            url ALIYUN_JCENTER_URL
        }
    }
}

• 修改項目目錄下build.gradle文件 將jcenter改爲http請求：

  jcenter(){url 'http://jcenter.bintray.com/'}

最後插上手機 打開調試模式。第一次估計要個10分鐘左右。

react-native run-android

OJBK