最近研究在原生项目中集成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，就不会有日志了
