请选择 进入手机版 | 继续访问电脑版

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

发表于 2016-06-24 14:37 显示全部楼层 35 6207

一、开篇

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


Snip20160707_134.png


二、环境集成

2.1 导入依赖的包资源

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

Snip20160707_135.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

如下图所示,则已经成功添加了依赖:

Snip20160707_136.png


注意:这几步很关键:

1)  创建一个文件夹来保存你的React代码,然后创建一个index.ios.js文件:

$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js

2)导入相关静态了库,添加相关frameworks文件。这一步很关键:

Snip20160707_137.png

3)添加一个容器视图来容纳RN组件,它可以是你应用里任何的UIView:

进到iOS项目工程中,创建一个继承自UIView的类,比如:RNScrollView(可以任意命名!),并进行初始化配置:

.h文件 

Snip20160707_138.png

.m文件

Snip20160707_139.png


4)在index.ios.js中实现跨平台代码:

Snip20160707_140.png


三、启动开发服务器

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

Snip20160707_141.png

看到上面的界面就意味着这个项目的服务已经启动啦!

       注意:直接运行项目会报Could not connect to development server错误,需要在项目中做如下配置:

Snip20160707_142.png

四、运行ios项目

      通过Xcode点击项目或者command + R运行项目,就会看到成功运行的界面:

1467857728772807.png

(Swift版本在下一篇文章中发布,包括项目源码)


回复 使用道具
举报
青果杰杰

发表于 2017-02-08 16:26 显示全部楼层

回复 支持 反对 使用道具
举报
烟雨过客

发表于 2017-02-08 16:23 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
破葫芦

发表于 2017-02-08 16:04 显示全部楼层

回复 支持 反对 使用道具
举报
pcatzj

发表于 2017-02-08 15:17 显示全部楼层

回复 支持 反对 使用道具
举报
哥哥在哪儿

发表于 2017-02-08 14:34 显示全部楼层

祝愿小码哥越来越红火!!红红火火恍恍惚惚!

回复 支持 反对 使用道具
举报
陈小呆

发表于 2017-02-08 14:26 显示全部楼层

必须给个赞!

回复 支持 反对 使用道具
举报
今夜为你想

发表于 2017-02-08 09:27 显示全部楼层

必须给个赞!

回复 支持 反对 使用道具
举报
追风筝的孩子

发表于 2017-02-08 09:16 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报
周牧

发表于 2017-02-08 08:54 显示全部楼层

1 先请大家注意我的头像。看到什么诡异的吗。 2 然后请大家仔细看我的ID,有什么内涵? 3 没看出来就默念我的ID 十遍,然后结合我的头像一起看!! 4 好了,你继续往楼下看吧,我就是来混脸熟的。

回复 支持 反对 使用道具
举报
1234下一页

发表新文章
叶建华老师

小码哥名师团队

0

学分

109

学币

167

积分

小码哥名师团队

Rank: 5Rank: 5

积分
167
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育