背景
React Native(以后簡(jiǎn)稱RN）是Facebook2015年4月開源的跨平臺(tái)移動(dòng)應(yīng)用框架∨捌铮口號(hào)是：Learn once，write anywhere. 主要使用JavaScript赎线、React廷没、ES6、JSX等語(yǔ)法垂寥，因此熟悉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 + Rbingo！模擬器就刷新啦哨苛，顯示結(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ā)灰蛙。
