iOS项目植入React Native进行混合开发

一、开篇
在之前的课程中由于时间关系，没有讲OC和RN的混编；本案例则是将reactnative项目成功地集成到iOS端，并完成所有原生app与javascript交互的所有功能，以下是项目截图：

1467857452287280.png

二、环境集成
2.1 导入依赖的包资源
创建一个iOS工程项目，切换到项目的根目录，导入React Native需要的包资源，执行命令：npm install，完成之后在项目目录中会出现node_modules文件夹，里面就是react-native依赖的所有项目包。

1467857471668886.png

小技巧：很多同学在执行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
如下图所示，则已经成功添加了依赖：

1467857493285731.png

注意：这几步很关键：
1) 创建一个文件夹来保存你的React代码，然后创建一个index.ios.js文件:
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js

****2）导入相关静态了库，******添加相关frameworks文件。******这一步很关键********:****
****[图片上传中。。。（4）]**

3）添加一个容器视图来容纳RN组件，它可以是你应用里任何的UIView:
进到iOS项目工程中，创建一个继承自UIView的类，比如：RNScrollView（可以任意命名！）,并进行初始化配置：

---

**.h文件 **

1467857511139767.png

.m文件

1467857520108487.png

4）在index.ios.js中实现跨平台代码：

1467857534206552.png

---

三、启动开发服务器
******** 在运行我们的项目之前，我们需要先启动我们的开发服务器。命令行进入进入项目根目录，执行 $ react-native start

****

1467857551267442.png

****
看到上面的界面就意味着这个项目的服务已经启动啦！
注意：直接运行项目会报Could not connect to development server
错误，需要在项目中做如下配置：

1467857556538155.png

四、运行ios项目
** 通过Xcode点击项目或者command + R运行项目，就会看到成功运行的界面：

1467857728772807.png

（Swift版本在下一篇文章中发布，包括项目源码）

来源：
http://bbs.520it.com/forum.php?mod=viewthread&tid=938&extra=page%3D1