iOS 原生项目集成 React Native
前置条件，配置react native 环境，官网有很详细的介绍，此处就不叙述了，请自行前往 传送门
正文
- 设置目录结构
创建一个空的文件夹用于存放 React Native 项目，然后在其中再创建一个
ios文件夹，将现有的 iOS 项目拷贝到子目录中，如下图，本次示例结构目录为RNDemo/ios
目录结构
- 安装 JavaScript 依赖
在
RNDemo中创建一个文件名为package.json文件，然后填入 React Native 相关信息，建议先使用 react-native 命令创建一个纯 react native 项目，然后拷贝package.json,这样可以确保版本对照关系是正确的，附上本次 demo 的内容
{
"name": "Demo1",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-code-push": "^5.3.4"
},
"devDependencies": {
"babel-jest": "23.0.1",
"babel-preset-react-native": "4.0.0",
"jest": "23.0.1",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
然后执行命令安装依赖
npm install
成功后如下图:
安装 JavaScript 依赖
- 使用 CocoaPods 安装 React Native 依赖
具体怎么安装/使用 CocoaPods 此处就不叙述了，iOS 开发人员应该都会，如果不会的话，请自行 Google
附上 Podfile 文件内容：
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
'RCTAnimation',
'RCTActionSheet',
'RCTImage',
'RCTVibration',
'RCTSettings',
'RCTGeolocation',
'RCTLinkingIOS'
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
执行命令安装 Pod
pod install
安装好后如图所示:
目录结构
目录结构
- 代码集成
在
RNDemo目录下创建一个 index.ios.js 文件，然后在 Xcode 中使用RCTRootView加载界面即可，此处可参考官方 demo,不再叙述
- 运行 Debug版本 测试
1.Xcode 配置允许访问网络
image.png
2. 启动本地服务
npm start
3.运行应用
# 在项目的根目录中执行 本例为 RNDemo
react-native run-ios
END
Tip
- 正式发布时，如果没有是CodePush 或者第三方热更新服务的话，需要将 js 文件
index.ios.js打包成jsbundle集成到 Xcode 项目中
react-native bundle --entry-file inde.ios.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios/
#exp
react-native bundle --entry-file xxx.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios/
