環(huán)境準(zhǔn)備

Mac、Xcode、node、watchman、React Native命令行工具react-native-cli。

開發(fā)React Native可以使用任何的編輯器，如sublime、webstorm、vscode等，因?yàn)殚_發(fā)React Native主要是編寫js代碼，但是必須要安裝Xcode來編譯iOS應(yīng)用所需的工具和環(huán)境。

因?yàn)槭窃贛ac環(huán)境，所以在安裝這些依賴的時(shí)候，建議使用Homebrew，當(dāng)然了，這只是建議，使用其他的安裝方式也可以。

安裝依賴

Xoce

Xcode是Mac自帶的，如果電腦中沒有，可以自己從App Store或者apple官網(wǎng)下載。在安裝Xcode的時(shí)候，會(huì)同時(shí)安裝Xcode IDE、Xcode命令行工具和iOS模擬器。

React Native目前需要Xcode9.4及以上的版本，如果當(dāng)前的版本低的話，可以按照上面的安裝方式升級(jí)。

Xcode命令行工具

啟動(dòng)Xcode，在Xcode > Preferences > Locations菜單項(xiàng)下檢查是否已經(jīng)安裝有Command Line Tools。命令行工具包括了一些必須的工具，如git等。如果已經(jīng)安裝了命令行工具，可以不用理會(huì)；如果沒有安裝，則自行百度下安裝方式吧。

image

node

brew install node

安裝node的時(shí)候，會(huì)打包安裝npm的，如果不習(xí)慣使用npm，或者有使用yarn習(xí)慣的，也可以使用yarn，這里暫且以npm為例。

watchman

brew install watchman

watchman，則是facebook提供的一個(gè)開源的項(xiàng)目，為監(jiān)控文件系統(tǒng)變更的工具，用來監(jiān)視文件并且記錄文件的改動(dòng)情況，當(dāng)文件變更時(shí)可以觸發(fā)一些操作，如執(zhí)行一些命令等。

react-native-cli

npm install react-native-cli -g

基本的依賴已經(jīng)安裝完成，結(jié)下來就可以創(chuàng)建項(xiàng)目了。

創(chuàng)建項(xiàng)目

使用react-native-cli命令行工具創(chuàng)建一個(gè)名為react1的項(xiàng)目.

react-native-cli創(chuàng)建項(xiàng)目方式

react-native init project-name 創(chuàng)建一個(gè)名為project-name的項(xiàng)目

react-native init project-name --version version-num 創(chuàng)建一個(gè)項(xiàng)目名稱為project-name版本號(hào)為version-num的react native項(xiàng)目

需要注意的是控制版本號(hào)參數(shù)version前面是兩個(gè)-，版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)。

如： react-native init react1 --version 0.44.3 這樣創(chuàng)建了一個(gè)名為react1版本號(hào)為0.44.3的react native項(xiàng)目。

下面我們就以剛創(chuàng)建的這個(gè)項(xiàng)目為例進(jìn)行說明。

項(xiàng)目創(chuàng)建完成之后，會(huì)有一些提示信息，可重點(diǎn)查看下以下幾行信息：

To run your app on iOS:

cd /usr/local/var/www/react/react1

react-native run-ios

• or -

Open ios/react1.xcodeproj in Xcode

Hit the Run button

To run your app on Android:

cd /usr/local/var/www/react/react1

Have an Android emulator running (quickest way to get started), or a device connected

react-native run-android

這幾行信息會(huì)告訴我們?nèi)缧羞\(yùn)行創(chuàng)建好的項(xiàng)目，記住即可。

編譯、運(yùn)行項(xiàng)目

我們可以按照安裝提示，采用命令行的方式運(yùn)行項(xiàng)目，如

cd /usr/local/var/www/react/react1

react-native run-ios

也可以使用Xcode集成環(huán)境編譯、運(yùn)行新創(chuàng)建的React Natie項(xiàng)目。使用Xcode編譯、運(yùn)行的時(shí)候，如果項(xiàng)目有異常的時(shí)候，會(huì)顯示異常信息，方便我們查看詳細(xì)的錯(cuò)誤信息，使用run-ios命令行的時(shí)候，這些異常信息就不會(huì)顯示出來；這就是集成開發(fā)環(huán)境給我們帶來的遍歷。

如果我們的代碼沒有問題，環(huán)境一切正常的話，初次運(yùn)行，大概會(huì)等個(gè)幾分鐘，就可以看到運(yùn)行結(jié)果了。當(dāng)然了，這里是Xcode的iOS模擬器運(yùn)行的項(xiàng)目。

image

我這里的示意圖已經(jīng)將運(yùn)行環(huán)境切換到真機(jī)上運(yùn)行的效果，模擬器上的效果基本一致。

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

我們前面已經(jīng)實(shí)現(xiàn)了在模擬器上運(yùn)行，但我們的更希望我們的項(xiàng)目能夠運(yùn)行我們的真實(shí)的機(jī)器上，希望看到項(xiàng)目真實(shí)的運(yùn)行效果。

這里我們以iOS設(shè)備為例。

1. 通過USB數(shù)據(jù)線連接設(shè)備

   通過數(shù)據(jù)線鏈接iOS手機(jī)和Mac電腦，然后使用Xcode打開我們的項(xiàng)目，即使用Xcode打開.xcodeproj文件。

   如果是第一次在你的iOS設(shè)備上運(yùn)行開發(fā)中的app，那么就需要先注冊(cè)你的設(shè)備為開發(fā)者工具。注冊(cè)方法為：

   打開Xcode，打開菜單Product，查找菜單Project下的Destination菜單項(xiàng),然后從設(shè)備列表中選擇我們自己的設(shè)備名稱，Xcode就會(huì)注冊(cè)我們的設(shè)備為開發(fā)者工具；

   image

2. 配置代碼簽名

   首先需要注冊(cè)蘋果開發(fā)者賬號(hào)。如果你之前還沒有注冊(cè)過，這里只針對(duì)你的設(shè)備在當(dāng)前的Mac環(huán)境中的開發(fā)者賬號(hào)。注冊(cè)方式為：

   使用Xcode打開React Native項(xiàng)目；

   然后在右側(cè)主要配置區(qū)域(這里我沒有找到這塊區(qū)域的專業(yè)名稱叫什么，暫且先這么叫著吧，等會(huì)我截圖展示，應(yīng)該就不會(huì)迷惑我說的到底是什么了)，選擇General標(biāo)簽；這里主要配置兩項(xiàng)：Signing和Deployment Info。

   Signing：首先確認(rèn)你的開發(fā)者賬號(hào)在Team的選擇項(xiàng)里面；如果沒有在的話，可以點(diǎn)擊選擇項(xiàng)里的add an Account來添加賬號(hào)；

   Deployment Info：Deployment Target：這里的版本選擇，要注意不要高于當(dāng)前設(shè)備的iOS版本，如果高了，會(huì)報(bào)錯(cuò)；如我的iPhone手機(jī)當(dāng)前的系統(tǒng)版本為12.0.1，我這里選擇了12.0；

   image

   在注冊(cè)證書的地方，可能會(huì)由于網(wǎng)絡(luò)的原因注冊(cè)失敗，這里沒啥別的好辦法，就多重試幾次(我現(xiàn)在截圖的是注冊(cè)成功的，如果注冊(cè)失敗了，會(huì)有注冊(cè)失敗的提示，還有"try again"的按鈕，就多點(diǎn)幾次重試按鈕吧，或者重啟下Xcode)。

3. 編譯運(yùn)行

   前面的幾步完成之后，接下來點(diǎn)擊“運(yùn)行”就可以了。

   第一次構(gòu)建項(xiàng)目，可能需要的時(shí)間會(huì)長(zhǎng)一點(diǎn)，等幾分鐘就可以了。構(gòu)建完成之后，效果就直接在iOS真機(jī)上顯示出來了。

在第一次手機(jī)真機(jī)運(yùn)行開發(fā)者項(xiàng)目的時(shí)候，可能會(huì)出現(xiàn)各種個(gè)樣的問題。一般情況下，確認(rèn)手機(jī)和電腦在同一個(gè)網(wǎng)絡(luò)，即使用同一個(gè)wifi；再就是讓手機(jī)信任我們前面注冊(cè)的開發(fā)者。設(shè)置信任注冊(cè)開發(fā)者的方法：設(shè)置-通用-設(shè)備管理，然后信任我們注冊(cè)的開發(fā)者賬號(hào)就可以了。