一、開篇
在之前的課程中由于時間關系,沒有講OC和RN的混編;本案例則是將reactnative項目成功地集成到iOS端,并完成所有原生app與javascript交互的所有功能,以下是項目截圖:
二、環境集成
2.1 導入依賴的包資源
創建一個iOS工程項目,切換到項目的根目錄,導入React Native需要的包資源,執行命令:npm install,完成之后在項目目錄中會出現node_modules文件夾,里面就是react-native依賴的所有項目包。
小技巧:很多同學在執行npm install可能會報各種錯誤,終極解決方案:直接react-native init ~ 產生一個新的工程,拷貝node_modules文件夾即可。
2.2 集成CocoaPod,并配置編譯環境
切換到項目根目錄,往Podfile中增加以下的內容。如果你還沒有這個文件,在你工程的根目錄下創建一個。
# 取決于你的工程如何組織,你的node_modules文件夾可能會在別的地方。
#請將:path后面的內容修改為正確的路徑。
pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依賴。
]
接著,終端切換到項目的根目錄,命令行執行:
$ pod install
如下圖所示,則已經成功添加了依賴:
注意:這幾步很關鍵:
1) 創建一個文件夾來保存你的React代碼,然后創建一個index.ios.js文件:
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js
****2)導入相關靜態了庫,******添加相關frameworks文件。******這一步很關鍵********:****
****[圖片上傳中。。。(4)]**
3)添加一個容器視圖來容納RN組件,它可以是你應用里任何的UIView:
進到iOS項目工程中,創建一個繼承自UIView的類,比如:RNScrollView(可以任意命名!),并進行初始化配置:
**.h文件 **
.m文件
4)在index.ios.js中實現跨平臺代碼:
三、啟動開發服務器
******** 在運行我們的項目之前,我們需要先啟動我們的開發服務器。命令行進入進入項目根目錄,執行 $ react-native start
****
看到上面的界面就意味著這個項目的服務已經啟動啦!
注意:直接運行項目會報Could not connect to development server
錯誤,需要在項目中做如下配置:
四、運行ios項目
** 通過Xcode點擊項目或者command + R運行項目,就會看到成功運行的界面:
(Swift版本在下一篇文章中發布,包括項目源碼)
來源:
http://bbs.520it.com/forum.php?mod=viewthread&tid=938&extra=page%3D1