最近由于过年刚回来，就看了下RN，觉得还不错，就搞了一下把RN集成到iOS原生项目中，然后和大家分享一下。
由于React并没有假设你其余部分的技术栈——它通常只作为MVC模型中的V存在——它也很容易嵌入到一个并非由React Native开发的应用当中。实际上，它可以和常见的许多工具结合，譬如CocoaPods。
1) 安装Node.js 方式一： 安装 nvm（安装向导在这里）。然后运行命令行如下：
nvm install node && nvm alias default node这将会默认安装最新版本的Node.js并且设置好命令行的环境变量，这样你可以输入node命令来启动Node.js环境。nvm使你可以可以同时安装多个版本的Node.js，并且在这些版本之间轻松切换。 方式二： 先安装Homebrew，再利用Homebrew安装Node.js，运行命令行如下：
//安装Home-brew/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"//安装Node.jsbrew install node2) 安装React Native的命令行工具（react-native-cli）
npm install -g react-native-cli如果之前已经安装并使用过CocoaPods，请忽略这一步（相信只要是iOS开发，一定大多数都接触过了哈）。 若没有安装，则运行命令如下：
gem install cocoa pods//权限不够则运行下面一句sudo gem install cocoapods在项目中建一个名为ReactComponent的文件夹, 用于存放我们react-native的相关文件, 再创建一个package.json文件, 用于初始化react-native.（文件夹名字自定义哈） 文件目录结构如下： 
创建package.json文件，文件内容如下：
其中，name为项目名称。dependencies里为react和react-native的版本信息。 建议利用react-native init AwesomeProject新建新项目时会自动创建package.json，直接把文件复制过来，更改name为自己的原生项目名，以确保react、和react-native的版本最新哈。
在ReactComponent目录下运行命令行：
npm install运行效果如下： 
这里很需要耐心，曾经的我看着毫无反应的控制台就放弃了n次。 可能静下心去看部动漫回来就会发现它只想成功了。 实在install不回来的话，如果之前有创建过React Native项目，把里面的node_modules直接拷贝过来，也是没有问题（个人尝试过）。
在ReactComponent文件夹里创建index.ios.js文件，作为js文件入口。 
index.ios.js文件内容如下：
若原项目无使用Cocoapods，则在根目录下创建Podfile。（有则直接添加pod相关代码） 目录结构如下： 
Podfile文件内容为（需确保路径对）：
platform :ios, “7.0”# 取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。# 请将:path后面的内容修改为正确的路径（一定要确保正确～～）。pod 'React', :path => ‘./ReactComponent/node_modules/react-native', :subspecs => [ 'Core', 'ART', 'RCTActionSheet', 'RCTAdSupport', 'RCTGeolocation', 'RCTImage', 'RCTNetwork', 'RCTPushNotification', 'RCTSettings', 'RCTText', 'RCTVibration', 'RCTWebSocket', 'RCTLinkingIOS',]#需要的模块依赖进来便可，这里是为了举例子，列举所有的模块然后在根目录执行pod更新命令：
pod install/*以下是失败情况的处理*/// pod命令过慢则可尝试下面命令pod install --verbose --no-repo-update// 其中无法正常下载pod install的解决方法：（or更新最新的CocoaPods version: 0.39.0 查看方法 pod --version）gem sources --remove https://rubygems.org/gem sources -a gem sources -l # 注意 taobao 是 https; # gem如果版本太老可以更新：sudo gem update --system; # 更新pod repo：pod repo update运行效果： 
下面的ReactViewController是我创建的专门放React Native模块的ViewController，有必要的话也可对RCTRootView进行进一步封装（就不用每次都重新配置一次）。 ReactViewController代码如下：
#import "ReactViewController.h"#import <RCTRootView.h>@interface ReactViewController ()@end@implementation ReactViewController- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"; NSURL * jsCodeLocation = [NSURL URLWithString:strUrl]; RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"NativeRNApp" initialProperties:nil launchOptions:nil]; self.view = rootView; // 也可addSubview，自定义大小位置}- (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.}@end项目结构如下： 
在iOS 9以上的系统中，除非明确指明，否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做，在尝试通过http连接到服务器时，会遭遇这个错误 - Could not connect to development server.
打开工程中的 Info.list 文件，添加下面配置即可：
<key>NSAPPTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>配置效果如下： 
在运行我们的项目之前，我们需要先启动我们的开发服务器。进入 reactnative目录 ,然后命令行启动服务：
react-native start记得在切换到之前创建的package.json文件目录下执行命令行。
运行成功效果如下： 
可以成功看到上面的界面，那就恭喜集成成功了。之前弄这个弄了一两天，主要卡在npm install不回来那一步，然后pod是不可能的。。写个更加详细的教程希望大家能更轻松的把React Native集成到原生项目中哈，有问题欢迎留言哈。此文转载之朱_源浩
新闻热点
疑难解答
