在许多的项目开发中，直接用ReactNative的项目不会很多，大部分都是原生的代码中，需要嵌入一两个界面，运用ReactNative。当然也有在ReactNative中跟原生的代码进行交互的情况。
ReactNative中文网中也有相关的集成说明，但是由于刚学习，对这方面还有些懵，会遇到一些问题，在这里就可以帮助初学者更快的跳过这些坑。下面我就简单的说一下将ReactNative项目成功地集成到ios端，并完成所有原生app与javascript交互的功能。
注：本文是在已经配置好ReactNative环境的前提下进行的操作。如果该环境未配置好，可以参考搭建ReactNative开发环境
环境集成：
一、创建依赖包文件(package.json)
React Native的植入过程同时需要React和React Native两个node依赖包。我们把具体的依赖包记录在package.json文件中。
- 如果项目根目录中没有这个文件，那就自己创建一个。
- 如果为了目录结构的美观，也可以在根目录下创建一个文件夹，放置相关的ReactNative文件。
如果自己创建package.json文件，终端操作
$ cd 需要放置的目录下（项目的根目录/项目中自己创建的文件夹）
$ touch package.json
里面的内容，可以参考一下示例。
记得删除里面的文字注释，包括双斜杠，否则报错，这里只是为了说明。
{
"name": "NumberTileGame",//此处替换你的项目名称
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.1",// react版本，可以替换成最新的。
"react-native": "0.42.0"// 同上，目前最新0.42.0
}
}
如果是从已有的ReactNative中拷贝过来的，修改一下里面的name即可。
二、安装依赖包(node_modules)
使用npm（即node包管理器，Node package manager）来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。
- 终端进入包含有package.json文件的目录下，运行下列命令来安装：
$ cd 项目的根目录/项目中自己创建的文件夹
$ npm install
等待执行完毕。项目中会多出一个node_modules文件夹。
很多同学在执行npm install可能会报各种错误，终极解决方案：直接react-native init ~ 产生一个新的工程，拷贝node_modules文件夹即可。
三、添加React Native框架(Podfile)
在React和React Native模块成功安装到node_modules目录之后，你就可以开始创建Podfile以便选择所需的组件安装到应用中。
创建Podfile的最简单的方式就是在iOS原生代码所在的目录中使用CocoaPods的init命令：
## 在iOS原生代码所在的目录中（也就是`.xcodeproj`文件所在的目录）执行：
$ cd 项目的根目录
$ pod init
如果电脑中还没有配置CocoaPods，可以参考一下这篇文章，更快的配置好最新最详细的CocoaPods安装教程。
然后再Podfile中添加一下内容:
注：编辑Podfile的时候，尽量不要用文本编辑器，可以使用Xcode打开，或者用vim Podfile去编辑。
# 最低适配的版本
platform :ios, "9.0"
use_frameworks!
# target的名字一般与你的项目名字相同
target 'TestReactNative' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
#记得此处的路径，如果你有创建一个新的文件夹存放这些文件，前面要加上你文件夹的名字：'../RNComponent/node_modules/react-native'，如果没有，直接如下创建即可。
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的模块
]
# 如果你的RN版本 >= 0.42.0，请加入下面这行
# 该版本号是package.json中的“dependencies”字典下面的“react-native”后面对应的内容
pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"
end
如果RN版本低于0.42.0，应该不会出现以下问题。
注：错误提示 我经过尝试，加入* pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"*这一行之后，会提示失败（见下图）。
如果出现此问题，说明./node_modules/react-native/ReactCommon目录下没有yoga文件，因此建议用第二步骤中提示的直接react-native init ~ 产生一个新的工程，替换已有的node_modules文件夹，直接npm install安装的文件可能不太完整。
替换之后终端中再执行一遍pod install。
创建好了Podfile后，就可以开始安装React Native的pod包了。
$ cd 项目的根目录
$ pod install
四、代码集成(index.ios.js文件创建)
现在我们已经准备好了所有依赖，可以开始着手修改原生代码来把React Native真正植入到应用中了。
- 首先创建一个空的index.ios.js文件。一般来说我们把它放置在同上面的package.json的同级目录下。
$ cd 项目的根目录/项目中自己创建的文件夹
$ touch index.ios.js
- 在index.ios.js中添加你自己的组件。这里我们只是简单的添加一个<Text>组件，然后用一个带有样式的<View>组件把它包起来。
- 在index.ios.js中实现跨平台代码：
例如：
'use strict';
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class RNHighScores extends React.Component {
render() {
var contents = this.props["scores"].map(
score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
);
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>
2048 High Scores!
</Text>
<Text style={styles.scores}>
{contents}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// 整体js模块的名称
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
五、iOS项目中进行初始化配置
进到iOS项目工程中，并进行初始化配置：
- 首先导入RCTRootView.h头文件
// #import "RCTRootView.h"，更新之后，需要导入下面的头文件。
// 官网的评论下方也有说明，否则会提示RCTRootView.h文件不存在。
#import <React/RCTRootView.h>
- viewDidload中加入代码
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"RNHighScores"
initialProperties :
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
六、启动开发服务器，运行Packager
# 进入到node_modules文件夹所在的路径
$ cd 项目的根目录/项目中自己创建的文件夹
$ npm start
注意：直接运行项目会报Could not connect to development server错误，需要在项目中配置App Transport Security。(相信这个大家都会的啦(≧▽≦)/)
在info.plist中添加
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
七、在Xcode中运行项目
至此就已经完成的项目的配置啦，大家可以在Xcode中运行项目了，并且在webStorm或者你喜欢的工具中编辑index.ios.js进行开发啦！
如果有问题，欢迎大家斧正~
我的Demo地址是TestReactNative
