最近研究在原生项目中集成React Native，在网上找了不少资料，也踏了不少坑，网上资料太多直接复制过来的，每个人的环境也不一样，所以别人可以的你不一定可以，在这做一下记录！

公司项目集成了cocoapods，所以采用的是cocoapods集成，在此记录一下步骤；

一、添加package.json文件

在项目根目录下创建一个package.json，里面添加内容：

{
    "name": "credit",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "~15.4.1",
        "react-native": "0.42.0"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "2.1.0",
        "jest": "20.0.4",
        "react-test-renderer": "~15.4.1"
    },
    "jest": {
        "preset": "react-native"
    }
}

里面的name的value改成项目的scheme值，

二、安装react-native模块

在终端cd到项目目录，然后执行

npm instal

三、创建 index.ios.js（js文件入口），里面内容添加

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var credit = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('credit', () => credit);

里面的credit更改成项目名！

四、集成react-native框架

在podfile里面写入：

pod 'React', :path => './node_modules/react-native', :subspecs => [
 'Core',
 'RCTActionSheet',
 'RCTGeolocation',
 'RCTImage',
 'RCTNetwork',
 'RCTPushNotification',
 'RCTSettings',
 'RCTText',
 'RCTVibration',
 'RCTWebSocket'
# needed for debugging
# Add any other subspecs you want to use in your project
]

相当于把需要的框架从本地集成到项目中
然后pod install
至此为止，React Native已经集成完毕，再就是使用了

五、招一个入口，写下下面代码！

    NSURL *jsCodeLocation;
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"credit"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    UIViewController *navVC = [[UIViewController alloc]init];
    navVC.view.backgroundColor = [UIColor yellowColor];
    navVC.view = rootView;
    [self.navigationController pushViewController:navVC animated:YES];

假如你用真机调试那么就将localhost改成你的电脑ip地址

五、了解js的都知道，js调试需要在本地开启服务，所以RN调试时候也需要在本地开启一个服务，开启方式是：
cd 到项目根目录，然后npm run start
出现：

image.png

就说明开启成功了，开启关键就是package.json里面的内容，内容如果有问题的话会导致开启不成功。

然后运行app，调出RN页面，当终端出现

image.png

说明正在加载RN页面，加载结束就会显示出来！
至此，RN集成完毕

运行的时候日志里面会一直出现

nw_connection_get_connected_socket 248 Connection has no connected handler

这个日志，下面的方法解决：
Edit scheme---> run-->Aruments --> Environment Variables -->Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"
然后重新运行app，就不会有日志了