公司想要尝试一下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文件到私有版本仓库后，问题解决。
网友评论