iOS Native项目集成React Native
公司想要尝试一下react native,虽然之前有过一些reactjs的开发经验,但将rn集成到native项目毕竟没干过,于是在google上搜了一大堆的教程,感觉都不怎么详细,没办法,自己动手吧!下面是我记录的详细步骤,以及遇到的坑:
先说说环境搭建吧,由于我是使用pod管理react native的各种依赖库,所以大家请先提前安装好cocoapods,至于怎么安装我就不详细说了,网上找下教程,很简单的,
1,cd到native项目所在的目录;
2,创建package.json文件,内容如下:
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
}
3,安装JavaScript依赖库
方案一,通过yarn安装,如何安装yarn以及环境变量配置:
1)yarn add react-native
2)yarn add react@version_printed_above
# warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
# 版本号是在安装react-native时通过警告告知的,如react@16.2.0
方案二,直接在package.json中指定react-native、react的版本号
{
"name": "intlApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.3.1",
"react-native": "^0.54.1"
}
}
1)npm install
4,将node_modules加入.gitignore文件
5,安装Command Line Tools,通过在Xcode中指定
Xcode -> Preferences... ->Locations -> Command Line Tools选项中选择相应的版本
6,更新Podfile,执行pod install
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # Include this for RN >= 0.47 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43 'RCTText',
'RCTNetwork',
'RCTWebSocket', # Needed for debugging 'RCTAnimation', # Needed for FlatList and animations running on native UI thread # Add any other subspecs you want to use in your project ]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => './node_modules/react-native/ReactCommon/yoga'
# Third party deps podspec link
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'
至此,我们已经搭建好环境,并且成功的将react native集成到native项目,剩下的就是编写rn代码了。
7,在项目根目录创建index.ios.js文件,同时编写其他rn组件
8,运行打包器,启动开发服务器
npm start
遇到的坑:
1,首先要确保pod的版本>=1.2.0
这是一个巨坑,在此之前,我的pod版本是1.1.1,在后面搭建环境的过程中真是吃尽了苦头,不是这个头文件找不到,就是那个头文件找不到,在未意识到是我pod版本不对之前,我是通过修改node_modules目录下引用的第三方库的podspec文件以及修改xcode project的搜索路径来解决,但这真不是一个好的解决办法,解决一个引用问题又会出现另一个引用问题,没完没了,后来,感谢万能的stackoverflow,让我找到了问题的根本原因,原来是pod 1.1.1版本有bug,会导致xcode找不到第三方库的头文件,1.2.0及以上的版本修复了这个bug,直接升级pod后,头文件找不到的bug消失。
2,Argument list too long: recursive header expansion failed
在解决第一个问题后,编译又会报上面的问题,简要描述就是用户设置的搜索路径是递归查找的,最后导致路径太长,最终头文件引用失败,知道原因后,我就去xcode搜索哪些path是设置为recursive的,果然,在taget->Build Settings->User Header Search Paths下的路径果然是recursive,改为non-recursive后,问题解决
3,Cocoapods私有库
通过pod管理react native依赖的第三方库,其中有三个库是直接从本地的node_modules目录指定的:
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'
但是,这其中的某个库需要依赖boost-for-react-native,在运行的时候,xcode会报boost-for-react-native找不到的错误,问题是鬼知道是因为cocoapods私有版本仓库没有包含boost-for-react-native的podspec文件,从而导致boost-for-react-native没法下载呢?而且这个库都不需要在Podfile中指定。一般情况很难会往这个方向想,大部分人的第一反应是xcode配置有问题?rn环境没搭好?等等。最后在花了我差不多一个多小时后,我突然灵机一动,会不会是由于我的私有仓库导致的?上传boost-for-react-native的podspec文件到私有版本仓库后,问题解决。