在《Mac系统下React Native环境搭建》配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用它,只是有时安装库很慢,还不如复制粘贴库来的快,就删除它了,这里就使用手动集成的方式吧。
1. 新增React Native文件路径和json说明文件,进入项目根目录(*.xcodeproj文件所在目录):
mkdir reactnative
cd reactnative
vim package.json : 用于初始化react native
文件内容为:
{
"name": "<项目名称>",
"version": "3.0.1612090",
"private": true,
"dependencies": {
"react": "^0.14.8",
"react-native": "^0.22.2"
}
}
执行"npm install",会在当前目录(reactnative)生成node_modules子目录,里面包含react-native包含的所有包:
npm install完成:
2. 在reactnative目录下新增index.ios.js文件:
3. 添加React Native依赖包(添加自己需要用的包就可以了):
1. 添加"React.xcodeproj"项目到现有项目:
2. 添加"RCTNetwork.xcodeproj":
3. 添加"RCTText.xcodeproj":
4. 添加"RCTWebSocket.xcodeproj":
5. 添加"RCTActionSheet.xcodeproj":
添加完后项目结构如下:
4. 添加frameworks:
5. 添加搜索的头文件地址:
在Header Search Paths增加一行:
增加后如下:
6. 运行,报如下错误:
在方法前加"(void)"即可,如下:
还有一个属性访问错误,很简单,修改即可。再次编译,可以了。
7. 测试react native功能:
1. 增加View,用来显示react native的文件内容:
2. 实现ReactViewTest.m :
3. 自定义view完成了,编写控制器将其展现出来:
8. 测试运行
先启动react-native服务端:
在reactnative目录下执行:"react-native start"
在项目的info.plist增加配置:
这里使用的是真机调试,因此,需要修改localhost为ip地址,且电脑和手机需要连接在同一个网络。
运行:
结果如下:
服务端输出如下:
可以看到,每次修改js文件,都是动态更新页面传输到手机上,刷新重新显示即可。
9. 发布时:
开发时从服务端获取渲染文件,发布时,就需要将文件打包为main.jsbundle了:
使用命令”curl http://192.168.1.102:8081/index.ios.bundle -o main.jsbundle“
在项目添加这个文件,修改ReactViewTest:
为了测试效果,关闭react native服务端,运行APP,可以正确从本地加载显示,完成了。
后面就可以按需继续使用js和原生来混合开发了。