工具
xcode+cocoapods+RN+webStorm
一、xcode+cocoapods
新創(chuàng)建一個(gè)以cocoapods管理的xcode項(xiàng)目
二懂拾、RN
①麦备、軟件安裝--只在首次安裝配置即可
參考連接:rn環(huán)境搭建
- Homebrew#
Homebrew, Mac系統(tǒng)的包管理器，用于安裝NodeJS和一些其他必需的工具軟件抄瑟。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
譯注：在Max OS X 10.11（El Capitan)版本中咧欣，homebrew在安裝軟件時(shí)可能會(huì)碰到/usr/local目錄不可寫的權(quán)限問題浅缸。可以使用下面的命令修復(fù)：
sudo chown -R \whoami` /usr/local`
Node#
使用Homebrew來安裝Node.js.
React Native需要NodeJS 4.0或更高版本魄咕。本文發(fā)布時(shí)Homebrew默認(rèn)安裝的是6.x版本衩椒，完全滿足要求。
brew install nodeReact Native的命令行工具（react-native-cli）#
React Native的命令行工具用于執(zhí)行創(chuàng)建哮兰、初始化毛萌、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)喝滞。
npm install -g react-native-cli
如果你看到EACCES: permission denied
這樣的權(quán)限報(bào)錯(cuò)阁将，那么請(qǐng)參照上文的homebrew譯注，修復(fù)/usr/local
目錄的所有權(quán)：
sudo chown -R \whoami` /usr/local`
- 其它
其中官網(wǎng)參考鏈接中還有一些推薦安裝的工具右遭，可以選擇性安裝之做盅。
②、RN項(xiàng)目配置
進(jìn)入工程根目錄中狸演，執(zhí)行
npm init（中間輸入的參數(shù)言蛇，后期可以直接在json文件中進(jìn)行更改）執(zhí)行
npm install react --save初始化react執(zhí)行
npm install react-native --save初始化react-native
（以上步驟結(jié)束后，會(huì)在項(xiàng)目中生成
node_modules文件夾宵距、package.json文件）
- 在xcode項(xiàng)目中腊尚，配置podfile，增加內(nèi)容如下：
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket'
#Add any other subspecs you want to use in your project
]
- 執(zhí)行
pod install刷新pods文件
注意：提交git要一起提交
node_modules文件夾满哪，否則打包找不到文件婿斥。
三、webStorm
①哨鸭、配置
參考：RN之IDE選擇和配置
-
RN開發(fā)基于js+原生語言民宿，原生語言iOS的話基于xcode，js則目前選擇webStorm像鸡。
使用之前活鹰，需要設(shè)置它使之支持js語法，點(diǎn)擊webstorm--preferences，將js language version設(shè)置為JSX Harmony即可識(shí)別JSX志群。
QQ20160921-0@2x.png 若使之支持RN語法着绷，需要借助一開源插件：ReactNative-LiveTemplate,根據(jù)提示安裝
②、使用
使用webStorm打開xcode項(xiàng)目锌云，選擇rn相關(guān)的文件荠医，開發(fā)即可。
使用入門
以上配置結(jié)束后桑涎，就可以進(jìn)行正常的開發(fā)了彬向。
- 在項(xiàng)目根目錄下（或項(xiàng)目中的其它目錄亦可）創(chuàng)建
index.ios.js文件(對(duì)應(yīng)package.json中的main)
vim index.ios.js
-
插入內(nèi)容（僅做測(cè)試）
QQ20160921-0.png 項(xiàng)目引入
導(dǎo)入
#import "RCTRootView.h"其中引入js代碼有2種方式
①、方式一：jsbundle導(dǎo)入
運(yùn)行
$ react-native bundle --entry-file ./index.ios.js --bundle-output ./js/main.jsbundle --platform ios --assets-dest ./bundle --dev false指令攻冷，將js文件打包成jsbundle方式娃胆。
常用于生產(chǎn)環(huán)境:(命令亦可：curl http://localhost:8081/index.ios.bundle -o main.jsbundle )
目錄結(jié)構(gòu).png
組織結(jié)構(gòu).png
②、方式二：直接導(dǎo)入
綜合兩種方式實(shí)現(xiàn)截圖如下：
- 啟動(dòng)rn服務(wù)
- 在終端或者在webstorm終端界面中運(yùn)行運(yùn)行
$ react-native start,啟動(dòng)本地服務(wù)器讲衫。(編譯js文本為bundle文件) - 運(yùn)行xcode項(xiàng)目
- 效果展示
注意缕棵，若出現(xiàn)錯(cuò)誤，可能是因?yàn)閕OS9以后的系統(tǒng)限制http訪問的原因涉兽，在info.plist中簡(jiǎn)單設(shè)置為：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
