React Native 端開發(fā)流程

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

簡介

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

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

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

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

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

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

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

Node, Watchman

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

brew install node
brew install watchman

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

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

設置 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ā)時的性能（packager 可以快速捕捉文件的變化從而實現(xiàn)實時刷新）。

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

Yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項目、運行打包服務（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 某第三方庫名。

Xcode

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

Xcode 的命令行工具

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

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

安裝依賴

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

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

Java Development Kit

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

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

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

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

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

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

#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

正確設置方法應該是這樣： org.gradle.jvmargs=-DsocksProxyHost=127.0.0.1 -DsocksProxyPort=8016

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

1. 安裝 Android Studio

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

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

然后點擊"Next"來安裝選中的組件。

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

安裝完成后，看到歡迎界面時，就可以進行下面的操作了。

2. 安裝 Android SDK

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

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

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

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

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

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

最后點擊"Apply"來下載和安裝這些組件。

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

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

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

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

# 如果你不是通過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 等其他，請使用對應的配置文件。

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

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

準備 Android 設備

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

使用 Android 真機

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

使用 Android 模擬器

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

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

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

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

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

開發(fā)

編譯

RN 編譯預覽模式:

# 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

開始編譯項目 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
編譯  編譯完成，花費2504 ms
生成  生成文件  /Users/chengshuai/Taro/taro-demo/rn_temp/pages/index/index_styles.js

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

編譯后的代碼及應用文件在根目錄的 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

其中關鍵文件及目錄如下：

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

如果編譯沒有報錯，會自動打開一個終端，并在 8081 端口啟動 Metro Bundler 負責打包 jsbundle：

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

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

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

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

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

啟動應用

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

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

首先將應用代碼 clone 下來：

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

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

注意 taro-native-shell 工程和 Taro 工程最好獨立存放，不要嵌套，否則會報：multi react-native 錯誤

工程目錄如下：

?  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，這時 Metro Bundler 終端會打印以下內(nèi)容：

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

使用 Xcode 啟動

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

這里需要注意的是 jsBundle 的 moduleName，默認的 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 字段的配置默認取自于 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，這時 Metro Bundler 終端會打印一下內(nèi)容：

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

在真實設備上運行

按照以下步驟設置您的設備：

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

按照以下步驟操作，在您的設備上運行應用：

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

1. 在 Select Deployment Target 窗口中，選擇您的設備，然后點擊 OK。

Android Studio 會在您連接的設備上安裝并啟動應用。

在模擬器上運行

按照以下步驟操作，在模擬器上運行應用：

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

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

Android Studio 會在模擬器上安裝并啟動應用。

在真機上運行

參考 在設備上運行

Module Name

同樣，Android 這邊默認的 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ù)實際情況自行修改。

調(diào)試

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

開發(fā)者菜單

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

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

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

刷新 JavaScript

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

自動刷新

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

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

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

但有些時候你必須要重新編譯應用才能使修改生效：

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

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

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

紅屏錯誤

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

黃屏警告

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

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

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

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

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

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

Chrome 開發(fā)者工具

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

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

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

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

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

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

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

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

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

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

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

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

adb reverse tcp:8081 tcp:8081

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

如果在 Chrome 調(diào)試時遇到一些問題，那有可能是某些 Chrome 的插件引起的。試著禁用所有的插件，然后逐個啟用，以確定是否某個插件影響到了調(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 需要到國外服務器下載二進制包，所以國內(nèi)用戶這一步很可能會卡住。此時請在環(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 ，一個基于 React Native 官方調(diào)試方式、包含 React Inspector / Redux DevTools 獨立應用：

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

安裝

不同平臺及版本的安裝包，請點擊這里。

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

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

啟動

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

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

你可以啟動應用之后再修改端口，也可以直接通過命令行啟動應用時指定端口：

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

如果啟動之后調(diào)試窗口空白，請確認調(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 無法抹平的，比如支付、登錄等，這時候就需要自己寫跨端代碼，RN 端這邊可能還需要修改原生代碼。

例如登錄的功能：

React Native 參考文檔:原生模塊

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

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

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

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

構(gòu)建獨立 app

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

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

生成 React Native 離線包（jsbundle）

在打包成 ipa 或 apk 應用包之前，我們先要得到 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目錄即可。

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

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

一般來說，主要就三步：

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

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

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

發(fā)布

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

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

更新 React Native 版本

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

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

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

常見錯誤

No bundle url present

導致這個報錯的原因很多，最常見的是電腦開了代理。具體可以參考 #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

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

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

具體可以參考 #1282

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

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