一丈莺、開(kāi)篇
在之前的課程中由于時(shí)間關(guān)系划煮，沒(méi)有講OC和RN的混編；本案例則是將reactnative項(xiàng)目成功地集成到iOS端缔俄，并完成所有原生app與javascript交互的所有功能弛秋，以下是項(xiàng)目截圖：
二、環(huán)境集成
2.1 導(dǎo)入依賴的包資源
創(chuàng)建一個(gè)iOS工程項(xiàng)目俐载，切換到項(xiàng)目的根目錄蟹略，導(dǎo)入React Native需要的包資源，執(zhí)行命令：npm install遏佣，完成之后在項(xiàng)目目錄中會(huì)出現(xiàn)node_modules文件夾挖炬，里面就是react-native依賴的所有項(xiàng)目包。
小技巧：很多同學(xué)在執(zhí)行npm install可能會(huì)報(bào)各種錯(cuò)誤状婶，終極解決方案：直接react-native init ~ 產(chǎn)生一個(gè)新的工程意敛，拷貝node_modules文件夾即可。
2.2 集成CocoaPod膛虫，并配置編譯環(huán)境
切換到項(xiàng)目根目錄草姻，往Podfile中增加以下的內(nèi)容。如果你還沒(méi)有這個(gè)文件稍刀，在你工程的根目錄下創(chuàng)建一個(gè)撩独。
＃ 取決于你的工程如何組織，你的node_modules文件夾可能會(huì)在別的地方。
＃請(qǐng)將:path后面的內(nèi)容修改為正確的路徑跌榔。
pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
＃ 添加其他你想在工程中使用的依賴。
]
接著捶障，終端切換到項(xiàng)目的根目錄僧须，命令行執(zhí)行：
$ pod install
如下圖所示，則已經(jīng)成功添加了依賴：
注意：這幾步很關(guān)鍵：
1) 創(chuàng)建一個(gè)文件夾來(lái)保存你的React代碼项炼，然后創(chuàng)建一個(gè)index.ios.js文件:
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js
****2）導(dǎo)入相關(guān)靜態(tài)了庫(kù)担平，******添加相關(guān)frameworks文件。******這一步很關(guān)鍵********:****
****[圖片上傳中锭部。暂论。。（4）]**
3）添加一個(gè)容器視圖來(lái)容納RN組件拌禾，它可以是你應(yīng)用里任何的UIView:
進(jìn)到iOS項(xiàng)目工程中取胎，創(chuàng)建一個(gè)繼承自UIView的類，比如：RNScrollView（可以任意命名Ｅ惹稀）,并進(jìn)行初始化配置：
**.h文件 **
.m文件
4）在index.ios.js中實(shí)現(xiàn)跨平臺(tái)代碼：
三闻蛀、啟動(dòng)開(kāi)發(fā)服務(wù)器
******** 在運(yùn)行我們的項(xiàng)目之前，我們需要先啟動(dòng)我們的開(kāi)發(fā)服務(wù)器您市。命令行進(jìn)入進(jìn)入項(xiàng)目根目錄觉痛，執(zhí)行 $ react-native start
****
看到上面的界面就意味著這個(gè)項(xiàng)目的服務(wù)已經(jīng)啟動(dòng)啦！
注意：直接運(yùn)行項(xiàng)目會(huì)報(bào)Could not connect to development server
錯(cuò)誤茵休，需要在項(xiàng)目中做如下配置：
四薪棒、運(yùn)行ios項(xiàng)目
** 通過(guò)Xcode點(diǎn)擊項(xiàng)目或者command + R運(yùn)行項(xiàng)目，就會(huì)看到成功運(yùn)行的界面：
（Swift版本在下一篇文章中發(fā)布榕莺，包括項(xiàng)目源碼）
來(lái)源：
http://bbs.520it.com/forum.php?mod=viewthread&tid=938&extra=page%3D1
