iOS原生项目中嵌套RN界面

2018-09-01 阅读量

React-Native与原生项目的混合开发已经是比较不错的方向了，在这里记录一下在iOS项目中，如何嵌套一个RN项目.

1.新建一个iOS工程，并随便写个跳转界面。

2.创建依赖包文档（package.json）

RN的配置环境包，是写在packpage.json中的，在这里你可以新建一个RN项目，去里面看看他的package.json文件的配置。在这里因为最新的react-native版本是0.56.0，不过挺坑的，该版本下有的东西可能Facebook还没有给配置好，所以在这里用了之前一个版本0.55.4。

在工程文件夹中(这里不需要在xcode里创建，要不后面资源包多的卡死你！！直接在目录下建就行了)，创建一个文件夹为react-native，先cd到该文件夹下运行如下代码创建package.json

1	touch package.json

然后将以下代码写进去（根据你的配置需要写）

{
"name": "MyHotDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"moment": "^2.22.2",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-swiper": "^1.5.13",
"react-navigation": "^2.12.1",
"teaset": "^0.5.9"
},
"devDependencies": {
"babel-jest": "^23.0.1",
"babel-preset-react-native": "^4.0.0",
"jest": "^23.1.0",
"react-test-renderer": "^16.4.1"
},
"jest": {
"preset": "react-native"
}
}

注意：这里如果你要切换一个版本号，devDependencies的配置文件和react也会不一样，你都要根据对应的修改。

3.安装依赖包（node_modules）

cd到react-native下，直接npm install，下载资源包，执行完毕后项目文件夹下会多出一个node_modules文件夹。

4.创建RN基本代码

在react-native下可以再创建index.js，App.js，app.json文件，这些就是RN界面启动时候运行的程序，代码的话，你完全可以对着新建的RN项目里复制一份，不过注意app.json中的Name要改成当前iOS项目的名字。

5.在iOS工程里添加RN框架

iOS工程里是没有RN框架的，所以在这里我们要根据cocoapods来创建它(默认你已经安装过cocoapods了)。
首先cd到工程目录下，也就是‘.xcodeproj’所在的目录，执行

pod init

修改Profile文件，建议用xcode打开它

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'MyHotDemo' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!

# Pods for MyHotDemo

target 'MyHotDemoTests' do
inherit! :search_paths
# Pods for testing
end

target 'MyHotDemoUITests' do
inherit! :search_paths
# Pods for testing
end

//这两个文件的路径，是根据node_modules的路径来的，这段注释到时候删掉，否则可能会影响pod，仅仅是提醒你一下。
pod 'yoga', :path => './MyHotDemo/react-native/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => './MyHotDemo/react-native/node_modules/react-native', :subspecs => [
'Core',
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'DevSupport',
'CxxBridge'
# needed for debugging
# Add any other subspecs you want to use in your project
]
end

其中，DevSupport和CxxBridge两个文件是我根据报错，Google出来的(不得不承认老外还是吊)，这里是适用于”react-native”: “0.55.4”版本，高的版本目前还没出来对应的方案(time = 2018.9.6).

然后执行pod install。

6.在iOS工程里进行初始化配置

7.开启RN的服务器

纯RN项目中，运行代码会自动启动服务器，因为这里我们是以原生工程为底层的，所以需要我们手动启动RN服务器

cd react-native,然后运行npm start

####8.跳转配置
这个时候在xcode中运行iOS代码，会发现跳转的时候报错,Could not connect to development server,需要在項目中配置App Transport Security,挺奇怪的吧，这东西一直以为只跟网路请求有关，应该在这里启动RN检查更新也算是网络请求吧？配置完重新运行一下，解决！

不同原生界面跳转不同RN界面，需要配置路由，具体看我上篇文章React Native与iOS原生交互

上面的demo可以去我的Github上下载