最近想學習下React Native，用JavaScript來編寫Android app。在寫程式碼之前，先搞明白幾個問題：用什麼開發工具比較好？React Native的原理是什麼，開發的App效能和原生應用一樣好麼？

搭建開發環境

React Native CLI

安裝Node.js，通過npm命令安裝React Native：

npm install -g react-native-cli

Visual Studio Code

程式碼編輯器可以選擇VSCode，因為可以找到很多擴充套件外掛。

Android Studio

安裝Android Studio。按照React Native的要求，開啟Android SDK Manager安裝6.0相關的包。

React Native ‘Hello World’

使用命令列來建立一個新的工程：

react-native init helloworld

建立之後的工程目錄結構：

在手機或者模擬器上執行程式。注意：只能有一個裝置連線著。

react-native run-android

在執行程式的時候，首先會啟動React Packager。React Packager會編譯index.android.js檔案。

Hot reloading

如果程式執行在模擬器上，只需要雙擊鍵盤上的R就可以重新載入修改的程式碼。如果程式碼執行在手機上，需要先搖晃一下手機，調出選單，然後選擇重新載入。不過這樣比較麻煩。所以在選單上可以啟用hot reloading避免每次都要搖晃手機來點選選單。

小米手機上無法執行程式怎麼辦

開啟設定>更多設定>開發者選項>關閉‘啟用MIUI優化’，重啟裝置就可以了。

React Native的工作原理

React Native使用JavaScript core作為JavaScript引擎。通過解析JavaScript介面，找到對應的Native介面。因此React Native建立的移動app效能和原生沒有差別。我們可以開啟編譯出來的APK檔案一探究竟。

APK檔案

React Native編譯工程之後會生成helloworld\android\app\build\outputs\apk\app-debug.apk。開啟這個APK檔案看一下有什麼：

在lib目錄中可以看到有很多的*.so庫檔案，其中就包含了libjsc.so，也就是JavaScript的引擎。

JavaScript資原始檔

在app-debug.apk檔案中似乎沒有看到任何和JavaScript程式碼相關的檔案，這是什麼情況？試一下單獨安裝app-debug.apk然後直接執行。你會發現無法執行程式。因為React Packager沒有啟動。我們安裝在手機上的只是一個客戶端程式，它必須和遠端的服務端通訊來更新程式碼修改。app-debug.apk並不是真正的應用安裝包。

用下面的命令來構建一個完整的app包：

cd android
gradlew assembleRelease

一個新的APK檔案會生成在helloworld\android\app\build\outputs\apk\ app-release-unsigned.apk。

開啟這個APK比較下，可以發現多了asset資源目錄：

把這個APK簽名之後就可以釋出到app市場了。

React Native的元件資源

React Native有很多自定義的元件，可以在js.coach上搜索下載。

學習視訊

如果可以訪問YouTube，可以看下這個視訊：

不用Android Studio和Xcode也可以開發React Native應用

Facebook最近又釋出了一個新的工具Create React Native App。有了這個工具，開發者不需要安裝Android Studio和Xcode就可以開發React Native應用了。

npm i -g create-react-native-app
create-react-native-app helloworld
cd helloworld
npm start

命令列執行之後會生成一個二維碼。在手機上先安裝Expo app，然後掃描二維碼來載入程式。原理和app-debug.apk是一樣的，這只是一個客戶端。你需要保證手機和PC在同一個區域網下。

安裝Expo App

如果你是iOS開發者，Expo app安裝很簡單，在iTunes上可以找到。如果你需要安裝Android版本，需要用Google Play安裝。如果無法訪問Google Play，可以用APKDOWNLOADER來下載Google Play上的APK。Expo app的包名是host.exp.exponent。

看下這個工程和React Native命令生成的有什麼差別：

這裡沒有Android目錄以及index.android.js檔案。

需要注意的是使用這個工程開發，只能使用JavaScript。如果需要用到native code，要把工程轉換成React Native工程。這個過程不可逆。執行命令：

npm run eject

再比較下結構：

現在差不多一樣了。執行程式：

react-native run-android