React Native - 環(huán)境搭建（踩坑指南）

官方文檔：
https://reactnative.cn/docs/getting-started/

使用環(huán)境：
Windows & Android

縮略詞：
RN(React Native)、AS(Android Studio)

1. 初始化項目

1.1 需要的環(huán)境

Node
Node 是 JS 的運行環(huán)境,這里注意需要下載的 Node 版本需要8.3以上洋措。
Python 2
Python 2的運行環(huán)境舀射，這里注意需要下載的python版本為 python 2.x ，不能是 python 3.x。
JDK
Java的運行環(huán)境，這里注意需要下載的JDK版本為1.8，只能是1.8建椰。

1.2 需要的配置

由于國內把很多東西都墻掉了，國內的良心公司提供了不少代理岛马，為我們的開發(fā)帶來方便棉姐。下面的一些配置信息，由官網提供啦逆。

npm 配置

npm 是 Node.js 的包管理工具伞矩，負責下載 js 代碼的依賴包，由于被墻夏志，我們需要配置下面的代理乃坤。

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

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

yarn 配置（可選）

yarn 是用來替代 npm 功能的工具，可以加速 npm 的下載沟蔑。

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

2. 開始第一個項目

注意：在開始之前溉贿，請確定 1.1 和 1.2 的配置已經完成枫吧。

第一步

找到一個你認為合適的位置浦旱，執(zhí)行如下命令宇色，創(chuàng)建一個名為 Self 的 RN 項目：

react-native init Self

執(zhí)行完成后，打開文件夾颁湖，可以看到如下內容：

正確的目錄樣式

第二步

連接我們的手機宣蠕，打開開發(fā)者模式-允許usb調試，然后在項目文件夾下執(zhí)行下面命令：

react-native run-android

執(zhí)行完成后甥捺，會開始下載一些 Android 項目需要的依賴包抢蚀，然后在手機上運行 App，效果如下：

App正確運行

注意：這里手機和電腦需要處于同一網段下镰禾，如果不在同一網段皿曲，可以左右劇烈搖晃手機唱逢，在彈窗中選擇 Dev Settings - Debug server host & port for device 選項中輸入 IP 和端口。

第三步

修改 App.js 文件屋休，然后重啟 App 坞古，看是否能正常顯示修改后的內容。

3. 集成 RN 項目到Android（Gradle項目）

3.1 準備工作

所謂準備工作劫樟，就是我們的 RN 項目痪枫。在集成進入 Android 中之前，我們需要確保我們的 RN 項目中存在 node_modules 這個文件夾叠艳。這個文件夾中存在 JavaScript 依賴的所有模塊奶陈，一般情況下，從 GitHub 上 clone 的項目不會有這個文件夾的附较。

如果沒有這個文件夾吃粒，我們需要在項目目錄下，執(zhí)行下面的命令：

npm install

如果使用的 yarn ，還可以直接執(zhí)行：

yarn

生成的 node_modules 中有很多的文件夾叶眉，如果只有一個.開頭的文件夾掖看，說明是錯誤的。

然后疏旨，需要將 RN 服務器打開，在項目路徑下執(zhí)行下面命令：

react-native start

成功后會彈出一個新的窗口扎酷，用來打印 RN 服務器日志檐涝。

3.2 添加依賴

** 第一步 **

在 App項目 的 build.gradle 文件中添加如下代碼：

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        ...
    }
    ...
}

url "$rootDir/../node_modules/react-native/android" 這段代碼實際上對應的是 node_modules/react-native/android 這個文件夾的真正地址，而 $rootDir 指的是項目根目錄法挨，如果你的 RN 項目和 App 不在同一目錄下谁榜，那么這里應該是實際地址。Windows 下面的 '\' 符號需要換成 '\\' 符號凡纳。

第二步

在 App項目 的 build.gradle 文件中添加如下代碼：

dependencies {
    compile 'com.android.support:appcompat-v7:23.0.1'
    ...
    compile "com.facebook.react:react-native:+" // From node_modules
}

要指定特定的 React Native 版本窃植，可以用具體的版本號替換 “+”，當然前提是你從 npm 里下載的是這個版本荐糜。

第三步

在==AndroidManifest.xml==下加上兩個權限：

<uses-permission android:name="android.permission.INTERNET" />

3.3 編碼及測試

由于主要測試集成結果巷怜，所以采用的簡單的Demo，提供免費的下載鏈接：

CSDN（系統(tǒng)強制要的1分）：RN項目集成測試

百度云盤（密碼 mh4x）：RN項目集成測試

在運行 Demo 前暴氏，請知曉如下幾點：

Demo 項目需要執(zhí)行 npm install
Demo 項目下開啟 RN 服務器（具體方法參考3.1）
使用 AS 編譯Demo_app
需要修改 Demo_app 項目下的 build.gradle (具體修改方法參考3.2)
運行 App 延塑。如果是在真機上測試，手機和電腦需要在同一網段答渔。

運行 App 時关带，分別輸入 Demo 和 Demo2，會分別顯示 App.js 和 APP.js 下面的內容沼撕，且修改兩個文件后宋雏，刷新界面芜飘，可以正常顯示。此時驗證集成完畢磨总。

4. 錯誤記錄

4.1 Failed to resolve ： com.facebook.react:react-native:xxx

這個問題發(fā)生在為 Android 項目添加了關于 React Native 的依賴時燃箭，出現問題的原因是因為無法下載相應的依賴，需要在 Android 項目的 build.gradle (不是 app 中的 build.gradle)文件中添加如下代碼：

allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
    ...
}

特別注意：url "$rootDir/../node_modules/react-native/android" 這段代碼實際上對應的是node_modules/react-native/android 這個文件夾的真正地址舍败，而 $rootDir 指的是項目根目錄招狸，如果你的 RN 項目和 App 不在同一目錄下，那么這里應該是實際地址邻薯。比如 Windows 下的路徑：

maven{
            url "F:\\Self\\node_modules\\react-native\\android"
        }

4.2 Received malformed response from registry for undefined. The registry may be down.

這個問題發(fā)生在初始化項目時（react-native init xxx）裙戏，原因是沒有配置代理，依次執(zhí)行下面的代碼可正常初始化

npm config set registry https://registry.npm.taobao.org 

npm config set disturl https://npm.taobao.org/dist

react-native init xxx

4.3 Manifest merger failed : uses-sdk:minSdkVersion 14 cannot be smaller than version 16 declared in library [com.facebook.react:react-native:0.55.4]

這個問題發(fā)生在將 RN 項目集成到其他項目中時（修改完 build.gradle 之后）厕诡，出現這個問題的原因累榜，是因為我們的 RN 要求的最低 SDK 版本是 16 ，而我們項目中實際的最低版本小于16灵嫌。解決辦法壹罚，就是修改 app 的最低 SDK 版本。

4.4 Unexpected end of JSON input while parsing near '..."_hasShrinkwrap":fals'

這個問題發(fā)生在使用 github 上面其它人的項目后寿羞，在生成 node_modules 文件夾時（執(zhí)行 npm install 或者 npm update 命令時報錯）猖凛。百度候找到的解決方案大部分都是下面這個方法：

npm cache clean --force

上面的這個方法清除了 npm 的緩存，但是實際驗證還是會有問題绪穆。后面找到了網上其它的說法辨泳，指出可能是 npm 和 node 的版本不合適導致的，參考：Unexpected end of JSON input while parsing near錯誤解決方式（網上的方法）

后面依次執(zhí)行了下面的命令玖院，最終成功生成了該文件夾：

npm -g i npm@4

npm cache clean --force

npm install

image

重點來了

上面的這個過程很麻煩菠红，并且降低了 npm 的版本后會不會導致其它環(huán)節(jié)出問題，誰也不知道难菌。這屬于不確定因素试溯。所以這里還提供一個簡單的辦法：

安裝 yarn：
npm install -g yarn react-native-cli

配置代理：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

yarn 是 Facebook 提供的用來替換 npm 的工具，執(zhí)行如下命令后就可以替代 npm install :

Yarn 工具安裝

4.5 java.lang.UnsatisfiedLinkError: could find DSO to load:libreactnativejni.so

同類問題包括：

java.lang.UnsatisfiedLinkError: dlopen failed: "xxx/libgnustl_shared.so" is 32-bit instead of 64-bit

產生這個問題的原因郊酒，是因為 RN 中同時存在 arm64-v8a 和 armeabi-v7a 的 so 文件遇绞，在打包時，只會將 arm64-v8a 的 so 打入 app 猎塞，導致找不到 armeabi-v7a 對應的 so 文件试读。具體的原因和分析可以看：【ReactNative】關于32位和64位SO庫混合引入Crash解決方案

解決方法杠纵，在 app 的 build.gradle 中加入下面配置：

defaultConfig {
        ...
        ndk{
            abiFilters "armeabi-v7a","x86"
        }
        packagingOptions {
            exclude "lib/arm64-v8a/libimagepipeline.so"
        }
    }

4.6 Program type already present: android.support.v4.app.ActionBarDrawerToggle$DelegateProvider

同類問題包括：

Program type already present: xxx

這個問題出現在編譯 App 包時荠耽，是由于RN 中依賴的包和其它依賴包有重復，需要 exclude 其中的一個包：

implementation("com.facebook.react:react-native:0.55.4"){ // From node_modules
    exclude module: 'android.support.v4'
}

4.7 Failed to resolve: com.facebook.react:react-native:0.55.5

同類問題包括：

Failed to resolve: com.facebook.react:react-native:xxx

這個問題出現在 Build 階段比藻，是由于無法下載 RN 的依賴導致铝量，具體的原因是由于手動將 com.facebook.react:react-native:+ 修改成了其它版本倘屹。

我們查看官方文檔可以發(fā)現，添加 RN 的依賴時慢叨，我們可以看到一段注釋： // From node_modules 纽匙。這段注釋告訴我們，我們依賴進入項目的 RN 版本是有 node_modules 決定的拍谐。也就是 RN 項目下的 package.json 內部定義的烛缔。

所以，我們解決這個問題的辦法有三個：

直接使用 com.facebook.react:react-native:+
根據 package.json 內部定義轩拨，修改依賴的版本
修改 package.json 內部定義

上面的三個方案践瓷，有兩點需要注意：

直接使用 com.facebook.react:react-native:+ 時，依然可能出現導入的 react-native 包的版本與 package.json 中的定義不一樣亡蓉，這時候晕翠，我們先在 App 中去掉這個依賴，然后 clear 工程砍濒，在 RN 目錄下淋肾，刪除 node_modules 文件夾，再通過命令重新生成爸邢，之后再在 App 中加入依賴樊卓。
修改 package.json 內部定義后，也需要重新生成 node_modules 文件夾