吐血推荐！React Native学习笔记(day03)

此篇干货出没，请小心！

现状：

很多公司项目历史都较为悠久，想要推翻用React-Native重写还是会有很多问题涉及到很多架构改动，许多时候，我们只是一些界面需要采用RN方案来实现，因此在这种情况下，我们要将React-Native集成到现有项目中。网上有很多资料，但是一些资料大多都是15年16年的，很多版本已经不适用，按其中方法接入会有各种坑。点击官方接入集成地址如果英文较好的小伙伴还是看官方的文档来操作比较权威。

调整一天我才顺利接入，先列举几个坑点，防止大家重复踩坑：
1.尽量用cocoapods集成，集成分为两种，一种使用cocoapods，另一种是不用cocoapods。官方推荐也是使用cocoapods安装，否则很多地方需要配置。
2.现在最新版本已经0.46，这个地方我之前的文章也提到过，国内网络环境下编译0.46版本可能会失败，推荐使用0.44.3版本来操作。
这边坑点还有很多，我先不在这边列举。跟着下面的文档，我会在其中描述，如果遇到其他问题，也欢迎留言交流。

下面开始动手操作集成：

1.新建一个react native项目，react-native init AwesomeProject这边AwesomeProject尽量用自己的工程名，这样后续操作会方便不少，当然不改名也无所谓。
2.新建个rn项目，我们只是利用下这个新建后的，package.json和node_modules。省去再npm install了。删除不必要的文件，留下node_modules和package.json,然后新建一个ios文件夹，将原来项目的根目录层全拷贝至ios文件夹。不上图，看文字操作可能还有误解，之前看了几篇博客都是这样。

1.png

这边还有个遗漏点：
package.js里改下react-native版本号，然后npm install一下，

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.3"
}

3.安装cocoapods，这个步骤我就不赘述了。一般iOS开发我相信都用过。
4.在刚才的ios文件夹下，创建Podfile文件，可以touch Podfile，也可以pod init。
5.创建完后，在里面引入React相关，根据自己需要引入。直接上干货，大家根据需要修改
platform :ios,’8.0’
# target的名字一般与你的项目名字相同
target ‘iportal’ do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    ‘RCTImage’,
    # 在这里继续添加你所需要的模块
  ]
  # 如果你的RN版本 >= 0.42.0，请加入下面这行
  pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

end

这边注意下，如果没引用，却在js代码中使用了，比如Text,那么编译不会报错，app会红色警告。

6.pod install，这步不多描述。
7.完成后，通过.xcworkspace打开，别用.xcodeproj打开，用过cocoapods的都知道。
8.打开后直接编译,可能会报错，那么别紧张。按照如下步骤排查。每个人出错原因都不一致，只能一步步排查。通常会有这个错，can't find xxx in i386之类。遇到这个问题是架构问题，将pod的build active Architecture Only与项目设置一致NO(如果有第三方要求yes，根据你需求改)。
Base SDK按项目的属性设置，lastest ios。这时候你会发现architecture已经变成armv7 armv7s arm64和项目一致了。这样再次cmd+b，神奇的发现success!如果还是fail，那么可以尝试重pod install，clean项目，再编译。这边还有其他办法，可以在stackoverflow搜索，我这只是一个解决办法。

测试一下：

到这步，我们已经完成了rn继承到原生iOS现有项目。但是我们还没写代码呢，怎么算完成。我们来测试一下。
我在根目录，新建了一个index.ios.js，与cellNew.js。用来测试一下加载。在xcode中，rn组件作为RCTRootView加载进来。在xcode中写：

initialProperties :nil                                      launchOptions    : nil];   ```
注意一下这边的moduleName与js端register的名字一样。`initialProperties`这边可以传递字典参数给js端。我就不展示用法了。后续文章会详解。效果如下：


![2.png](http://upload-images.jianshu.io/upload_images/1375161-db2f98b1b1b3dfe1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

好了，大功告成。结合前几篇文章，我们已经能够集成react native，并且完成简单的页面集成制作交互。