一、开篇
在之前的课程中由于时间关系,没有讲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