背景

React Native(以后簡(jiǎn)稱RN）是Facebook2015年4月開源的跨平臺(tái)移動(dòng)應(yīng)用框架。口號(hào)是：Learn once，write anywhere. 主要使用JavaScript、React、ES6、JSX等語法，因此熟悉Web前端開發(fā)的技術(shù)人員只需很少的學(xué)習(xí)就可以進(jìn)入移動(dòng)應(yīng)用開發(fā)領(lǐng)域。

特性

優(yōu)點(diǎn)

1.跨平臺(tái)
2.熱更新
3.代碼復(fù)用
4.節(jié)省開發(fā)人力
4.……etc.

缺點(diǎn)

1.學(xué)習(xí)成本
2.安裝包大
3.首次運(yùn)行耗時(shí)
4.……ect.

說那些都沒用，就問你要不要用吧

開始干吧

1.搭建環(huán)境

安裝Homebrew

Homebrew是Mac下的系統(tǒng)安裝包工具，相信很多iOS開發(fā)同學(xué)都已經(jīng)裝過這個(gè)了，裝過的可以跳過此步。沒有的使用下面代碼就行
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
其中如果碰到讀寫權(quán)限問題可以修改權(quán)限之后重新安裝
sudo chown -R`whoami`/usr/local

安裝Node

使用Homebrew安裝Node.js，安裝最新版就完了
brew install node
使用過Cocoapods的同學(xué)都知道在安裝完之后要修改下鏡像地址的，至于為啥相信大家心里都有點(diǎn)B數(shù)的。同樣Node也需要
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

安裝Yarn、react-native-cli

Yarn是Facebook提供的替代npm的工具用來加速node下載。react-native-cli是RN的命令行工具，主要執(zhí)行創(chuàng)建、初始化、更新、運(yùn)行、打包等任務(wù)。
npm install -g yarn react-native-cli
當(dāng)然大家都懂的
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Xcode

這玩意相信大家都有安裝了，有一點(diǎn)就是需要8.0及以上版本。大家可以去App Store下載安裝最新版的使用。最好不要去其他三方地方下載，去年那一撥ghost相信大家也都知道。

到這里必須工具基本安裝完了，足夠進(jìn)行開發(fā)了。但是本著簡(jiǎn)單省力的原則還是安裝下面這些：

2.推薦安裝

Watchman

Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時(shí)的性能（packager可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）。
一句話就是：開發(fā)的時(shí)候，修改代碼之后不用重新編譯運(yùn)行整個(gè)程序了，只需要cmd+R就可以馬上刷新了。沒錯(cuò)，就是有這種操作。
安裝最新版watchman:
brew install watchman

Webstorm

Webstorm,裝這個(gè)干嘛？當(dāng)然是用來編寫RN了！什么，用Xcode？額。。。你還可以用txt。
Webstorm是收費(fèi)軟件，大家可以支持正版，也可以***，恩恩。

3.測(cè)試項(xiàng)目

構(gòu)建項(xiàng)目

我們需要利用命令來創(chuàng)建項(xiàng)目，并不是傳統(tǒng)的利用XCode直接創(chuàng)建
首先命令進(jìn)入到目標(biāo)文件夾，我們假如工程放在首頁(yè)
cd ~/Desktop
然后就可以執(zhí)行RN命令了
react-native init RNProj 注：首次有可能會(huì)比較慢，還是耐心等吧，畢竟我們都得用到新版本。

react-native init RNProj

react-native init RNProj結(jié)果

這里RN項(xiàng)目就創(chuàng)建成功了，文件結(jié)構(gòu)如下：

RN項(xiàng)目目錄結(jié)構(gòu)

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

從上圖react-native init RNProj結(jié)果中可以看到要運(yùn)行對(duì)應(yīng)的項(xiàng)目可以有兩種方式：

• 命令運(yùn)行
  cd /Users/xxx/Desktop/RNProj也就是cd到RN項(xiàng)目文件夾
  react-native run-ios 運(yùn)行RN項(xiàng)目的iOS版本
• 直接到RN項(xiàng)目文件夾->iOS->xxx.xcodeproj，用XCode打開像傳統(tǒng)的運(yùn)行一樣點(diǎn)擊RUN按鈕就可以
  首次運(yùn)行會(huì)比較慢，可以通過命令行看到都進(jìn)行了哪些操作
  運(yùn)行成功后會(huì)另打開一個(gè)終端窗口來運(yùn)行packager在8081端口，如下：
  
  packager window.png
  
  iOS模擬器會(huì)啟動(dòng)并運(yùn)行，顯示如下：
  
  首次運(yùn)行RN-iOS.png

Hello World

選擇自己稀罕的IDE打開index.ios.js文件：

index.ios.js內(nèi)容截圖.js內(nèi)容截圖

圖中標(biāo)注部分與模擬器上顯示內(nèi)容對(duì)應(yīng)。那我們就在這個(gè)基礎(chǔ)上對(duì)其進(jìn)行修改。

• 首先我們需要為Hello World定制一個(gè)Style。在index.ios.js文件下部分的styles里面添加：

hello: {
  fontSize: 30,
  textAlign: 'center',
  margin: 20,
  marginBottom: 50,
  color: '#54FF54',
 },

• 然后我們?cè)谏厦娼貓D位置添加：

<Text style={styles.hello}>
      Hello Wrold!
</Text>

Hello World 修改

• 最后我們選擇iOS模擬器，cmd + R bingo！模擬器就刷新啦，顯示結(jié)果如下：
  
  Hello World 運(yùn)行

驚不驚喜，刺不刺激，意不意外

注：我們可以在選擇iOS模擬器時(shí)使用cmd + D來打開開發(fā)者界面進(jìn)行Reload等操作

開發(fā)者界面

真機(jī)調(diào)試

除了在XCode中進(jìn)行正常的Bundle identifier、Version、Provisioning Profile、Certificate等配置之外，需要以下操作：

• 設(shè)備必須通過USB連接電腦
• 設(shè)備和電腦處于同一WiFi網(wǎng)絡(luò)
• XCode選擇設(shè)備，點(diǎn)擊運(yùn)行按鈕即可
  如果你需要在真機(jī)上啟用調(diào)試功能，則需要打開RCTWebSocketExecutor.m文件(位置RNProj/node_modules/react-native/Libraries/WebSocket/RCTWebSocketExecutor.m)，然后將其中的"localhost"改為你的電腦的IP地址，最后啟用開發(fā)者菜單中的"Debug JS Remotely"選項(xiàng)。

完事

到這里我們已經(jīng)成功的創(chuàng)建了一個(gè)基于RN的工程，并實(shí)現(xiàn)了運(yùn)行，修改。后續(xù)會(huì)繼續(xù)跟進(jìn)RN的持續(xù)開發(fā)。