React Native 端開發(fā)流程

本篇主要講解 Taro React Native 端 環(huán)境安裝-開發(fā)-調(diào)試-打包-發(fā)布 原理及流程，React Native 開發(fā)前注意事項(xiàng)請看 開發(fā)前注意適配 RN 端可參考項(xiàng)目：首個(gè) Taro 多端統(tǒng)一實(shí)例 - 網(wǎng)易嚴(yán)選（小程序 + H5 + React Native） - By 趣店 FEDTaro 從 2.0 開始，依賴的 React Native 版本由 0.55.4 升級為 0.59.9。

簡介

Taro 移動端的開發(fā)基于 Facebook 的開源項(xiàng)目 React Native，目前是項(xiàng)目依賴中固定 React Native 版本為 0.55.4。

整個(gè) RN 端的開發(fā)流程如下：

首先在 Taro 項(xiàng)目里執(zhí)行：taro build --type rn --watch，這個(gè)命令會將 Taro 代碼編譯為 React Native 代碼（默認(rèn)輸出在 rn_temp 目錄下），并啟動 Metro Server（可以看成是 webpack run devserver --port 8081）打包 rn_temp 下的 js。

然后進(jìn)入 taro-native-shell 目錄（建議和 Taro 項(xiàng)目平級），通過 react-native run-android|ios啟動，或者通過對應(yīng)的 Android Studio / Xcode 啟動應(yīng)用，啟動后應(yīng)用可以看成是一個(gè)瀏覽器，會從 8081 端口加載 js 并渲染。

搭建 iOS 開發(fā)環(huán)境

必須安裝的依賴有：Node、Watchman 和 React Native 命令行工具以及 Xcode。

雖然你可以使用任何編輯器來開發(fā)應(yīng)用（編寫 js 代碼），但你仍然必須安裝 Xcode 來獲得編譯 iOS 應(yīng)用所需的工具和環(huán)境。

Node, Watchman

我們推薦使用 Homebrew 來安裝 Node 和 Watchman。在命令行中執(zhí)行下列命令安裝：

brew install node
brew install watchman

如果你已經(jīng)安裝了 Node，請檢查其版本是否在 v8.3 以上。安裝完 Node 后建議設(shè)置 npm 鏡像以加速后面的過程（或使用科學(xué)上網(wǎng)工具）。

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

設(shè)置 npm 鏡像：

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

或者使用 nrm：

$ nrm ls

* npm -----  https://registry.npmjs.org/
  cnpm ----  http://r.cnpmjs.org/
  taobao --  https://registry.npm.taobao.org/
  nj ------  https://registry.nodejitsu.com/
  skimdb -- https://skimdb.npmjs.com/registry

$ nrm use cnpm  //switch registry to cnpm

    Registry has been set to: http://r.cnpmjs.org/

Watchman 則是由 Facebook 提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時(shí)的性能（packager 可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）。

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

Yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。

npm install -g yarn react-native-cli

安裝完 yarn 后同理也要設(shè)置鏡像源：

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 某第三方庫名。

Xcode

React Native 目前需要 Xcode 9.4 或更高版本。你可以通過 App Store 或是到 Apple 開發(fā)者官網(wǎng) 上下載。這一步驟會同時(shí)安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。

Xcode 的命令行工具

啟動 Xcode，并在 Xcode | Preferences | Locations 菜單中檢查一下是否裝有某個(gè)版本的 Command Line Tools。Xcode 的命令行工具中包含一些必須的工具，比如 git 等。

搭建 Android 開發(fā)環(huán)境

安裝依賴

必須安裝的依賴有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio。

雖然你可以使用任何編輯器來開發(fā)應(yīng)用（編寫 js 代碼），但你仍然必須安裝 Android Studio 來獲得編譯 Android 應(yīng)用所需的工具和環(huán)境。

Java Development Kit

React Native 需要 Java Development Kit [JDK] 1.8（暫不支持 1.9 及更高版本）。你可以在命令行中輸入

javac -version來查看你當(dāng)前安裝的 JDK 版本。如果版本不合要求，則可以到 官網(wǎng)上下載。

Android 開發(fā)環(huán)境

如果你之前沒有接觸過 Android 的開發(fā)環(huán)境，那么請做好心理準(zhǔn)備，這一過程相當(dāng)繁瑣。請 萬分仔細(xì)地閱讀下面的說明，嚴(yán)格對照文檔進(jìn)行配置操作。

注：請注意！??！國內(nèi)用戶必須必須必須有穩(wěn)定的翻墻工具，否則在下載、安裝、配置過程中會不斷遭遇鏈接超時(shí)或斷開，無法進(jìn)行開發(fā)工作。某些翻墻工具可能只提供瀏覽器的代理功能，或只針對特定網(wǎng)站代理等等，請自行研究配置或更換其他軟件?？傊绻麍?bào)錯(cuò)中出現(xiàn)有網(wǎng)址，那么 99% 就是無法正常翻墻。

如果是 socks5 代理 ，如下這樣設(shè)置其實(shí)并沒有什么卵用

#systemProp.socks.proxyHost=127.0.0.1
#systemProp.socks.proxyPort=8016

#systemProp.https.proxyHost=127.0.0.1
#systemProp.https.proxyPort=8016

#systemProp.https.proxyHost=socks5://127.0.0.1
#systemProp.https.proxyPort=8016

正確設(shè)置方法應(yīng)該是這樣： org.gradle.jvmargs=-DsocksProxyHost=127.0.0.1 -DsocksProxyPort=8016

修改 $HOME/.gradle/gradle.properties 文件,加入上面那句，這樣就可以全局開啟 gradle 代理

1. 安裝 Android Studio

首先下載和安裝 Android Studio，國內(nèi)用戶可能無法打開官方鏈接，請自行使用搜索引擎搜索可用的下載鏈接。安裝界面中選擇"Custom"選項(xiàng)，確保選中了以下幾項(xiàng)：

• Android SDK
• Android SDK Platform
• Performance (Intel ? HAXM) (AMD 處理器看這里)
• Android Virtual Device

然后點(diǎn)擊"Next"來安裝選中的組件。

如果選擇框是灰的，你也可以先跳過，稍后再來安裝這些組件。

安裝完成后，看到歡迎界面時(shí)，就可以進(jìn)行下面的操作了。

2. 安裝 Android SDK

Android Studio 默認(rèn)會安裝最新版本的 Android SDK。目前編譯 React Native 應(yīng)用需要的是 Android 6.0 (Marshmallow) 版本的 SDK（注意 SDK 版本不等于終端系統(tǒng)版本，RN 目前支持 android 4.1 以上設(shè)備）。你可以在 Android Studio 的 SDK Manager 中選擇安裝各版本的 SDK。

你可以在 Android Studio 的歡迎界面中找到 SDK Manager。點(diǎn)擊 "Configure"，然后就能看到 "SDK Manager"。

SDK Manager 還可以在 Android Studio 的 "Preferences" 菜單中找到。具體路徑是 Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中選擇 "SDK Platforms"選項(xiàng)卡，然后在右下角勾選 "Show Package Details"。展開 Android 6.0 (Marshmallow) 選項(xiàng)，確保勾選了下面這些組件（重申你必須使用穩(wěn)定的翻墻工具，否則可能都看不到這個(gè)界面）：

• Android SDK Platform 28
• Intel x86 Atom_64 System Image（官方模擬器鏡像文件，使用非官方模擬器不需要安裝此組件）

然后點(diǎn)擊"SDK Tools"選項(xiàng)卡，同樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項(xiàng)，確保選中了 React Native 所必須的 23.0.1 版本。你可以同時(shí)安裝多個(gè)其他版本，然后還要勾選最底部的 Android Support Repository。

最后點(diǎn)擊"Apply"來下載和安裝這些組件。

3. 配置 ANDROID_HOME 環(huán)境變量

React Native 需要通過環(huán)境變量來了解你的 Android SDK 裝在什么路徑，從而正常進(jìn)行編譯。

具體的做法是把下面的命令加入到 ~/.bash_profile 文件中：

~表示用戶目錄，即/Users/你的用戶名/，而小數(shù)點(diǎn)開頭的文件在 Finder 中是隱藏的，并且這個(gè)文件有可能并不存在?？稍诮K端下使用vi ~/.bash_profile命令創(chuàng)建或編輯。如不熟悉 vi 操作，請點(diǎn)擊 這里 學(xué)習(xí)。

# 如果你不是通過Android Studio安裝的sdk，則其路徑可能不同，請自行確定清楚。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

如果你的命令行不是 bash，而是例如 zsh 等其他，請使用對應(yīng)的配置文件。

使用 source $HOME/.bash_profile 命令來使環(huán)境變量設(shè)置立即生效（否則重啟后才生效）?？梢允褂?nbsp;echo $ANDROID_HOME 檢查此變量是否已正確設(shè)置。

請確保你正常指定了 Android SDK 路徑。你可以在 Android Studio 的 "Preferences" 菜單中查看 SDK 的真實(shí)路徑，具體是Appearance & Behavior → System Settings → Android SDK。

準(zhǔn)備 Android 設(shè)備

你需要準(zhǔn)備一臺 Android 設(shè)備來運(yùn)行 React Native Android 應(yīng)用。這里所指的設(shè)備既可以是真機(jī)，也可以是模擬器。Android 官方提供了名為 Android Virtual Device（簡稱 AVD）的模擬器。此外還有很多第三方提供的模擬器如 Genymotion、BlueStack 等。一般來說官方模擬器免費(fèi)、功能完整，但性能較差。第三方模擬器性能較好，但可能需要付費(fèi)，或帶有廣告。

使用 Android 真機(jī)

你也可以使用 Android 真機(jī)來代替模擬器進(jìn)行開發(fā)，只需用 usb 數(shù)據(jù)線連接到電腦，然后遵照 在設(shè)備上運(yùn)行 這篇文檔的說明操作即可。

使用 Android 模擬器

你可以在 Android Studi 打開 "AVD Manager" 來查看可用的虛擬設(shè)備，它的圖標(biāo)看起來像下面這樣：

如果你剛剛才安裝 Android Studio，那么可能需要先 創(chuàng)建一個(gè)虛擬設(shè)備。點(diǎn)擊"Create Virtual Device..."，然后選擇所需的設(shè)備類型并點(diǎn)擊"Next"。

選擇 "x86 Images" 選項(xiàng)卡，這里可以看到你之前已安裝過的鏡像文件。必須先安裝鏡像文件才能創(chuàng)建對應(yīng)的虛擬設(shè)備。

如果你還沒有安裝 HAXM（Intel 虛擬硬件加速驅(qū)動），則先按 這篇文檔 說明來進(jìn)行安裝。

然后點(diǎn)擊 "Next" 和 "Finish" 來完成虛擬設(shè)備的創(chuàng)建。

開發(fā)

編譯

RN 編譯預(yù)覽模式:

# yarn
$ yarn dev:rn
# npm script
$ npm run dev:rn
# 僅限全局安裝
$ taro build --type rn --watch
# npx 用戶也可以使用
$ npx taro build --type rn --watch

Taro 將會開始編譯文件：

?  taro-demo git:(master) ? taro build --type rn --watch
???? Taro v1.2.20

開始編譯項(xiàng)目 taro-demo
編譯  JS        /Users/chengshuai/Taro/taro-demo/src/app.js
編譯  SCSS      /Users/chengshuai/Taro/taro-demo/src/app.scss
拷貝  HTML      /Users/chengshuai/Taro/taro-demo/src/index.html
生成  生成文件  /Users/chengshuai/Taro/taro-demo/rn_temp/app_styles.js
編譯  JS        /Users/chengshuai/Taro/taro-demo/src/pages/index/index.js
編譯  SCSS      /Users/chengshuai/Taro/taro-demo/src/pages/index/index.scss
生成  index.js  /Users/chengshuai/Taro/taro-demo/rn_temp/index.js
生成  app.json  /Users/chengshuai/Taro/taro-demo/rn_temp/app.json
生成  package.json  /Users/chengshuai/Taro/taro-demo/rn_temp/package.json
編譯  編譯完成，花費(fèi)2504 ms
生成  生成文件  /Users/chengshuai/Taro/taro-demo/rn_temp/pages/index/index_styles.js

初始化完畢，監(jiān)聽文件修改中...

編譯后的代碼及應(yīng)用文件在根目錄的 rn_temp 目錄下，常見的工程目錄結(jié)構(gòu)如下：

rn_temp
├── app.js
├── app.json
├── app_styles.js
├── index.html
├── index.js
├── pages
│   └── index
│       ├── component.js
│       ├── index.js
│       └── index_styles.js
└── yarn.lock

其中關(guān)鍵文件及目錄如下：

• index.js：React Native 入口文件
• app.json：React Native 應(yīng)用的配置，從 config.rn.appJson 中獲取

如果編譯沒有報(bào)錯(cuò)，會自動打開一個(gè)終端，并在 8081 端口啟動 Metro Bundler 負(fù)責(zé)打包 jsbundle：

注意：少數(shù)電腦上，可能不會 自動打開一個(gè)終端，這時(shí)你可以在項(xiàng)目根目錄下運(yùn)行：node ./node_modules/react-native/local-cli/cli.js start --reset-cache 手動啟動。碰到 react native haste module map 相關(guān)的錯(cuò)誤，也可以選擇這種方式手動清緩存啟動 。

這時(shí)，在瀏覽器輸入 http://127.0.0.1:8081，可以看到如下頁面：

輸入 http://127.0.0.1:8081/rn_temp/index.bundle?platform=ios&dev=true 會觸發(fā)對應(yīng)終端平臺的 js bundle 構(gòu)建。

構(gòu)建完成后，瀏覽器會顯示構(gòu)建后的 js 代碼。

Note：進(jìn)入下一步之前請確保 Metro Bundler Server 正常啟動，即瀏覽器能正常訪問訪問 jsbundle。

啟動應(yīng)用

如果上一步的編譯和 Metro Bundler Server 啟動沒問題，接下來就可以啟動應(yīng)用了。

開發(fā)者可以自行整合 React Native (0.55.4) 到原生應(yīng)用，同時(shí)為了方便大家開發(fā)和整合，Taro 將 React Native 工程中原生的部分剝離出來，單獨(dú)放在一個(gè)工程里面 NervJS/taro-native-shell，你可以把它看成是 React Native iOS/Android 空應(yīng)用的殼子。

首先將應(yīng)用代碼 clone 下來：

git clone git@github.com:NervJS/taro-native-shell.git

然后 cd taro-native-shell，使用 yarn 或者 npm install 安裝依賴。

注意 taro-native-shell 工程和 Taro 工程最好獨(dú)立存放，不要嵌套，否則會報(bào)：multi react-native 錯(cuò)誤

工程目錄如下：

?  taro-native-shell git:(master) ? tree -L 1
.
├── LICENSE
├── README.md
├── android // Android 工程目錄
├── ios // iOS 工程目錄
├── node_modules
├── package.json
└── yarn.lock

iOS

使用 React Native 命令啟動

$ react-native run-ios

iOS 模擬器會自行啟動，并訪問 8081 端口獲取 js bundle，這時(shí) Metro Bundler 終端會打印以下內(nèi)容：

 BUNDLE  [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

使用 Xcode 啟動

iOS 的啟動比較簡單，使用 Xcode 打開 ios 目錄，然后點(diǎn)擊 Run 按鈕就行。

這里需要注意的是 jsBundle 的 moduleName，默認(rèn)的 moduleName 為 "taroDemo"，需要和 rn_temp/app.json 里面的 name 字段保持一致。該配置在 AppDelegate.m 文件中。

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"rn_temp/index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"taroDemo"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

app.json 字段的配置默認(rèn)取自于 package.json 的 name 字段，除非你在 rn -> appJson 里面有配置。

更多資料，可以查看 Xcode 文檔：Building Your App

Android

在 taro-native-shell/android 目錄下，你就可以看到 React Native 的工程代碼。

使用 React Native 命令啟動

$ react-native run-android

Android 模擬器會自行啟動，并訪問 8081 端口獲取 js bundle，這時(shí) Metro Bundler 終端會打印一下內(nèi)容：

 BUNDLE  [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

在真實(shí)設(shè)備上運(yùn)行

按照以下步驟設(shè)置您的設(shè)備：

1. 使用一根 USB 電纜將您的設(shè)備連接到您的開發(fā)機(jī)器。如果您是在 Windows 上開發(fā)，可能需要為您的設(shè)備 安裝相應(yīng)的 USB 驅(qū)動程序。
2. 按照以下步驟操作，在 Developer options 中啟用 USB debugging。 首先，您必須啟用開發(fā)者選項(xiàng)：打開 Settings 應(yīng)用。（僅在 Android 8.0 或更高版本上）選擇 System。滾動到底部，然后選擇 About phone。滾動到底部，點(diǎn)按 Build number 7 次。返回上一屏幕，在底部附近可找到 Developer options。 打開 Developer options，然后向下滾動以找到并啟用 USB debugging。

按照以下步驟操作，在您的設(shè)備上運(yùn)行應(yīng)用：

1. 在 Android Studio 中，點(diǎn)擊 Project 窗口中的 app 模塊，然后選擇 Run > Run（或點(diǎn)擊工具欄中的 Run ）。

1. 在 Select Deployment Target 窗口中，選擇您的設(shè)備，然后點(diǎn)擊 OK。

Android Studio 會在您連接的設(shè)備上安裝并啟動應(yīng)用。

在模擬器上運(yùn)行

按照以下步驟操作，在模擬器上運(yùn)行應(yīng)用：

1. 在 Android Studio 中，點(diǎn)擊 Project 窗口中的 app 模塊，然后選擇 Run > Run（或點(diǎn)擊工具欄中的 Run ）。
2. 在 Select Deployment Target 窗口中，點(diǎn)擊 Create New Virtual Device。

1. 在 Select Hardware 屏幕中，選擇電話設(shè)備（如 Pixel），然后點(diǎn)擊 Next。
2. 在 System Image 屏幕中，選擇具有最高 API 級別的版本。如果您未安裝該版本，將顯示一個(gè) Download 鏈接，因此，請點(diǎn)擊該鏈接并完成下載。
3. 點(diǎn)擊 Next。
4. 在 Android Virtual Device (AVD) 屏幕上，保留所有設(shè)置不變，然后點(diǎn)擊 Finish。
5. 返回到 Select Deployment Target 對話框中，選擇您剛剛創(chuàng)建的設(shè)備，然后點(diǎn)擊 OK。

Android Studio 會在模擬器上安裝并啟動應(yīng)用。

在真機(jī)上運(yùn)行

參考 在設(shè)備上運(yùn)行

Module Name

同樣，Android 這邊默認(rèn)的 jsBundle moduleName 也是 “taroDemo”，位于 MainActivity.java 的文件里面：

package com.tarodemo;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "taroDemo";
    }
}

你可以根據(jù)實(shí)際情況自行修改。

調(diào)試

更多資料可以查看 React Native 調(diào)試。

開發(fā)者菜單

React Native 在 iOS 模擬器上支持一些快捷鍵操作，具體會在下文中描述。要使用快捷鍵請務(wù)必確保模擬器的 Hardware 菜單中，Keyboard 選項(xiàng)下的"Connect Hardware Keyboard"處于開啟狀態(tài)，否則按鍵是沒有響應(yīng)的。

你可以通過搖晃設(shè)備或是選擇 iOS 模擬器的 "Hardware" 菜單中的 "Shake Gesture" 選項(xiàng)來打開開發(fā)菜單。另外，如果是在 iOS 模擬器中運(yùn)行，還可以按下 Command? + D 快捷鍵，Android 模擬器對應(yīng)的則是 Command? + M（windows 上可能是 F1 或者 F2），或是直接在命令行中運(yùn)行 adb shell input keyevent 82 來發(fā)送菜單鍵命令。

在發(fā)布（production）版本中開發(fā)者菜單將無法使用。

刷新 JavaScript

傳統(tǒng)的原生應(yīng)用開發(fā)中，每一次修改都需要重新編譯，但在 RN 中你只需要刷新一下 JavaScript 代碼，就能立刻看到變化。具體的操作就是在開發(fā)菜單中點(diǎn)擊 "Reload" 選項(xiàng)。也可以在 iOS 模擬器中按下 Command? + R，Android 模擬器上對應(yīng)的則是 按兩下R。

自動刷新

選擇開發(fā)菜單中的 "Enable Live Reload" 可以開啟自動刷新，這樣可以節(jié)省你開發(fā)中的時(shí)間。

更神奇的是，你還可以保持應(yīng)用的當(dāng)前運(yùn)行狀態(tài)，修改后的 JavaScript 文件會自動注入進(jìn)來（就好比行駛中的汽車不用停下就能更換新的輪胎）。要實(shí)現(xiàn)這一特性只需開啟開發(fā)菜單中的 Hot Reloading 選項(xiàng)。

某些情況下 hot reload 并不能順利實(shí)施。如果碰到任何界面刷新上的問題，請嘗試手動完全刷新。

但有些時(shí)候你必須要重新編譯應(yīng)用才能使修改生效：

• 增加了新的資源(比如給 iOS 的Images.xcassets或是 Andorid 的res/drawable文件夾添加了圖片)
• 更改了任何的原生代碼（objective-c/swift/java）

應(yīng)用內(nèi)的錯(cuò)誤與警告提示（紅屏和黃屏）

紅屏或黃屏提示都只會在開發(fā)版本中顯示，正式的離線包中是不會顯示的。

紅屏錯(cuò)誤

應(yīng)用內(nèi)的報(bào)錯(cuò)會以全屏紅色顯示在應(yīng)用中（調(diào)試模式下），我們稱為紅屏（red box）報(bào)錯(cuò)。你可以使用console.error()來手動觸發(fā)紅屏錯(cuò)誤。

黃屏警告

應(yīng)用內(nèi)的警告會以全屏黃色顯示在應(yīng)用中（調(diào)試模式下），我們稱為黃屏（yellow box）報(bào)錯(cuò)。點(diǎn)擊警告可以查看詳情或是忽略掉。和紅屏報(bào)警類似，你可以使用 console.warn() 來手動觸發(fā)黃屏警告。在默認(rèn)情況下，開發(fā)模式中啟用了黃屏警告?？梢酝ㄟ^以下代碼關(guān)閉：

console.disableYellowBox = true;
console.warn('YellowBox is disabled.');

你也可以通過代碼屏蔽指定的警告，像下面這樣調(diào)用 ignoreWarnings 方法，參數(shù)為一個(gè)數(shù)組：

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

在 CI/Xcode 中，黃屏警告還可以通過設(shè)置 IS_TESTING 環(huán)境變量來控制啟用與否。

紅屏錯(cuò)誤和黃屏警告在發(fā)布版（release/production）中都是自動禁用的。

Chrome 開發(fā)者工具

在開發(fā)者菜單中選擇 "Debug JS Remotely" 選項(xiàng)，即可以開始在 Chrome 中調(diào)試 JavaScript 代碼。點(diǎn)擊這個(gè)選項(xiàng)的同時(shí)會自動打開調(diào)試頁面 http://localhost:8081/debugger-ui.(如果地址欄打開的是 ip 地址，則請自行改為 localhost)

在 Chrome 的菜單中選擇 Tools → Developer Tools 可以打開開發(fā)者工具，也可以通過鍵盤快捷鍵來打開（Mac 上是 Command? + Option? + I，Windows 上是 Ctrl + Shift + I或是 F12）。打開有 異常時(shí)暫停（Pause On Caught Exceptions） 選項(xiàng)，能夠獲得更好的開發(fā)體驗(yàn)。

注意：Chrome 中并不能直接看到 App 的用戶界面，而只能提供 console 的輸出，以及在 sources 項(xiàng)中斷點(diǎn)調(diào)試 js 腳本。一些老的教程和文章會提到 React 的 Chrome 插件，這一插件目前并不支持 React Native，而且調(diào)試本身并不需要這個(gè)插件。不過你可以安裝獨(dú)立（非插件）版本的 React Developer Tools 來輔助查看界面布局，下文會講述具體安裝方法。

注意：使用 Chrome 調(diào)試目前無法觀測到 React Native 中的網(wǎng)絡(luò)請求，你可以使用功能更強(qiáng)大的第三方的 react-native-debugger來進(jìn)行觀測。

使用自定義的 JavaScript 調(diào)試器來調(diào)試

如果想用其他的 JavaScript 調(diào)試器來代替 Chrome，可以設(shè)置一個(gè)名為 REACT_DEBUGGER 的環(huán)境變量，其值為啟動自定義調(diào)試器的命令。調(diào)試的流程依然是從開發(fā)者菜單中的 "Debug JS Remotely" 選項(xiàng)開始。

被指定的調(diào)試器需要知道項(xiàng)目所在的目錄（可以一次傳遞多個(gè)目錄參數(shù)，以空格隔開）。例如，如果你設(shè)定了 REACT_DEBUGGER="node /某個(gè)路徑/launchDebugger.js --port 2345 --type ReactNative"，那么啟動調(diào)試器的命令就應(yīng)該是 node /某個(gè)路徑/launchDebugger.js --port 2345 --type ReactNative /某個(gè)路徑/你的RN項(xiàng)目目錄。

以這種方式執(zhí)行的調(diào)試器最好是一個(gè)短進(jìn)程（short-lived processes），同時(shí)最好也不要有超過 200k 的文字輸出。

使用 Chrome 開發(fā)者工具來在設(shè)備上調(diào)試

If you're using Create React Native App, this is configured for you already.

對于 iOS 真機(jī)來說，需要打開 RCTWebSocketExecutor.m 文件，然后將其中的 "localhost" 改為你的電腦的 IP 地址，最后啟用開發(fā)者菜單中的 "Debug JS Remotely" 選項(xiàng)。

對于 Android 5.0+設(shè)備（包括模擬器）來說，將設(shè)備通過 USB 連接到電腦上后，可以使用adb命令行工具來設(shè)定從設(shè)備到電腦的端口轉(zhuǎn)發(fā)：

adb reverse tcp:8081 tcp:8081

如果設(shè)備 Android 版本在 5.0 以下，則可以在開發(fā)者菜單中選擇"Dev Settings - Debug server host for device"，然后在其中填入電腦的”IP 地址:端口“。

如果在 Chrome 調(diào)試時(shí)遇到一些問題，那有可能是某些 Chrome 的插件引起的。試著禁用所有的插件，然后逐個(gè)啟用，以確定是否某個(gè)插件影響到了調(diào)試。

使用 React Developer Tools 調(diào)試

You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:

npm install -g react-devtools

譯注：react-devtools 依賴于 electron，而 electron 需要到國外服務(wù)器下載二進(jìn)制包，所以國內(nèi)用戶這一步很可能會卡住。此時(shí)請?jiān)诃h(huán)境變量中添加 electron 專用的國內(nèi)鏡像源：ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"，然后再嘗試安裝 react-devtools。

安裝完成后在命令行中執(zhí)行 react-devtools 即可啟動此工具：

react-devtools

It should connect to your simulator within a few seconds.

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

使用 React Native Debugger 調(diào)試

React Native Debugger ，一個(gè)基于 React Native 官方調(diào)試方式、包含 React Inspector / Redux DevTools 獨(dú)立應(yīng)用：

• 基于官方的 Remote Debugger 且提供了更為豐富的功能
• 包含 react-devtools-core 的 React Inspector
• 包含 Redux DevTools，且與 redux-devtools-extension 保持 API 一致

安裝

不同平臺及版本的安裝包，請點(diǎn)擊這里。

macOS 平臺可以使用 Homebrew Cask 安裝：

$ brew update && brew cask install react-native-debugger

啟動

在啟動 React Native Debugger 之前，請先確認(rèn)以下內(nèi)容：

• 所有的 React Native 的 debugger 客戶端已關(guān)閉，特別是 http://localhost:<port>/debugger-ui
• React Native Debugger 會嘗試連接 debugger 代理， React Native 默認(rèn)使用 8081 端口， 你可以新建一個(gè) debugger 窗口 (macOS: Command + T，Linux/Windows: Ctrl + T) 開定義端口
• 保證 developer menu 的 Debug JS Remotely 處于開啟狀態(tài)

你可以啟動應(yīng)用之后再修改端口，也可以直接通過命令行啟動應(yīng)用時(shí)指定端口：

$ open "rndebugger://set-debugger-loc?host=localhost&port=8081"

如果啟動之后調(diào)試窗口空白，請確認(rèn)調(diào)試端口正確。

使用 Redux DevTools Extension API

Use the same API as redux-devtools-extension is very simple:

const store = createStore(
  reducer, /* preloadedState, */
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

See Redux DevTools Integration section for more information.

更多資料

• 快速開始
• Debugger 整合
• React DevTools 整合
• Redux DevTools 整合
• Shortcut references
• Network inspect of Chrome Developer Tools
• Enable open in editor in console
• Troubleshooting
• Contributing

使用原生模塊

有一些平臺性的差異是 Taro 無法抹平的，比如支付、登錄等，這時(shí)候就需要自己寫跨端代碼，RN 端這邊可能還需要修改原生代碼。

例如登錄的功能：

React Native 參考文檔:原生模塊

集成到現(xiàn)有原生 app

Taro 編譯后的項(xiàng)目實(shí)際上就是一個(gè) native React Native 項(xiàng)目，所以集成到現(xiàn)有原生 app 的流程和 React Native 也是一樣的。

如果你正準(zhǔn)備從頭開始制作一個(gè)新的應(yīng)用，那么 React Native 會是個(gè)非常好的選擇。但如果你只想給現(xiàn)有的原生應(yīng)用中添加一兩個(gè)視圖或是業(yè)務(wù)流程，React Native 也同樣不在話下。只需簡單幾步，你就可以給原有應(yīng)用加上新的基于 React Native 的特性、畫面和視圖等。

React Native 參考文檔：集成到現(xiàn)有原生應(yīng)用

構(gòu)建獨(dú)立 app

接下來的步驟將會幫助你為 iOS 和 Android 創(chuàng)建獨(dú)立二進(jìn)制文件，并將其提交到 Apple App Store 和 Google Play Store。

構(gòu)建 iOS 獨(dú)立應(yīng)用程序需要 Apple Developer 帳戶，但構(gòu)建 Android 獨(dú)立應(yīng)用程序不需要 Google Play Developer 帳戶。如果您想要提交到任一應(yīng)用商店，您將需要該商店的開發(fā)者帳戶。

生成 React Native 離線包（jsbundle）

在打包成 ipa 或 apk 應(yīng)用包之前，我們先要得到 React Native 離線包：

• 方式一：

taro build --type rn

然后會生成 rn_bundle 目錄，目錄下會生成的 React Native 離線包，也就是打包后的 js。

└── rn_bundle ├── assets ├── index.bundle └── index.bundle.meta

• 方式二：

使用 React Native 的 bundle 命令將 rn_temp 目錄下的 RN 代碼及資源打包成 jsbundle，命令如下：

node ./node_modules/react-native/local-cli/cli.js bundle --entry-file ./rn_temp/index.js --bundle-output ./rn_bundle/index.bundle --assets-dest ./rn_bundle --dev false

其中參數(shù)可以自行調(diào)整，--bundle-output 可以制定任意目錄，然后將 bundle 目錄下的文件 copy 到 taro-native-shell目錄即可。

當(dāng)然，也可以通過指定 --bundle-output 直接輸出到 taro-native-shell目錄。

通過 React Native 離線包構(gòu)建 APP

一般來說，主要就三步：

1. copy 生成的 jsbundle 到 React Native 工程對應(yīng)目錄下，如：taro-native-shell 工程或自己的 React Native 工程
2. 修改對應(yīng)的入口文件的 Bundle 名稱，如 iOS 的 AppDelegate.m 文件，Android 的 MainApplication 文件
3. 通過 React Native 命令或者對應(yīng)的 IDE （Xcode/Android Studio） 打包 APP。

搜索 React Native 離線包 ，可以得到很多操作指引和教程，這里不再贅述，以下兩篇可以借鑒：

• iOS 可以參考：ReactNative - 打離線包 (一) 原生RN命令打包
• Android 可以參考：ReactNative打離線包-android篇

發(fā)布

打包好的應(yīng)用發(fā)布到 App Store 或各大應(yīng)用商店可以查看官方文檔。

• Overview of publishing an app
• Publish your app | Android Developers

更新 React Native 版本

Taro RN 版本暫時(shí)固定在 0.55.4 ,用戶如有需求，可以自行升級到更高版本。步驟如下：

1. 更新 Taro 項(xiàng)目中 package.json React Native 版本，并重新安裝依賴
2. 更新 taro-native-shell 項(xiàng)目中 package.json React Native 版本，并重新安裝依賴
3. 分別重新安裝 taro-native-shell 項(xiàng)目中 ios/android 依賴，如 iOS：cd ios && pod install

如果對 react 版本有要求，可以同步更新。

常見錯(cuò)誤

No bundle url present

導(dǎo)致這個(gè)報(bào)錯(cuò)的原因很多，最常見的是電腦開了代理。具體可以參考 #12754

UnableToResolveError: Unable to resolve module AccessibilityInfo

原因很多，我這邊是重啟電腦就好了????。 具體可以查看 #14209

Metro Bundler error: Expected path […] to be relative to one of the project roots

不支持 npm link，可以使用 nicojs/node-install-local 替代。

Image component does not resolve images with filenames that include '@' symbol

React Native 不支持路徑中帶 @ 符號，具體可以查看 #14980。

The development server returned response error code 500

多半是依賴的問題，進(jìn)入 .rn_temp/ 目錄，然后刪除 npm 依賴，在重新安裝就可以了。 也可以試一下以下命令：

watchman watch-del-all
rm -rf node_modules && npm install
rm -fr $TMPDIR/react-*

具體可以參考 #1282

app 加載阻塞： "Building JavaScript bundle... 100%"

可能的原因很多，可以參考這個(gè) issue：react-community/create-react-native-app#392