一、cocoapods安装
1.安装� RVM
$curl -L https://get.rvm.io | bash -s stable
期间可能会问你sudo管理员密码，以及自动通过homebrew
安装依赖包，等待一段时间后就可以成功安装好 RVM。
然后，载入 RVM 环境（新开 Termal 就不用这么做了，会自动重新载入的）
$source ~/.rvm/scripts/rvm
检查一下是否安装正确
$ rvm -v
rvm 1.22.17 (stable) by Wayne E. Seguin <wayneeseguin@gmail.com>, Michal Papis <mpapis@gmail.com> [https://rvm.io/]
2.用 RVM 安装 Ruby 环境
列出已知的ruby版本
$ rvm list known
可以选择现有的rvm版本来进行安装（下面以rvm 2.0.0版本的安装为例）
$ rvm install 2.0.0
同样继续等待漫长的下载，编译过程，完成以后，Ruby, Ruby Gems 就安装好了。
另附:
-
查询已经安装的ruby
$ rvm list -
卸载一个已安装版本
$ rvm remove 1.9.2
3.设置 Ruby 版本
RVM 装好以后，需要执行下面的命令将指定版本的 Ruby 设置为系统默认版本
$ rvm 2.0.0 --default
同样，也可以用其他版本号，前提是你有用 rvm install 安装过那个版本
这个时候你可以测试是否正确
$ ruby -v
ruby 2.2.2p247 (2013-06-27 revision 41674) [x86_64-darwin13.0.0]
$ gem -v
2.1.6
更新gem
$ sudo gem update --system
这有可能是因为Ruby的默认源使用的是cocoapods.org，国内访问这个网址有时候会有问题，网上的一种解决方案是将远替换成淘宝的，替换方式如下：
$ gem source -r https://rubygems.org/
$ gem source -a https://ruby.taobao.org
要想验证是否替换成功了，可以执行：
$ gem sources -l
正常的输出结果：
CURRENT SOURCES
http://ruby.taobao.org/
到这里就已经把Ruby环境成功的安装到了Mac OS X上，接下来就�安装cocoapods
4.安装cocoapods
$ sudo gem install cocoapods
备注：如果在OS X EL Capitan系统上不行，换做
$ sudo gem install -n /usr/local/bin cocoapods
再运行
$ pod setup
二、导入react-native包
1.安装react、react-native
在js文件目录下新建package.json文件，并编辑
{
"name": "RNProjectName",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.1.0",
"react-native": "0.28.1"
}
}
运行
$ npm install
设置淘宝镜像
$ npm config set registry " https://registry.npm.taobao.org "
2.创建js程序入口文件
在项目根目录下创建index.ios.js，并编辑
'use strict'; import React, { Component } from 'react'; import { AppRegistry, Text, StyleSheet, View,} from 'react-native'; var styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'red' } }); class SimpleApp extends Component { render() { return ( <View style={styles.container}> <Text>This is a simple application.</Text> </View>) } } AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
3.导入react-native
在项目根目录新建Podfile文件，并编辑
pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', 'RCTImage', 'RCTNetwork', 'RCTText', 'RCTWebSocket', 添加其他你想在工程中使用的依赖。 ]
在pod是1.0.1版本以上，改为
platform :ios, '8.0' target 'RNProjectName' do pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', 'RCTImage', 'RCTNetwork', 'RCTText', 'RCTWebSocket', 添加其他你想在工程中使用的依赖。 ] end
运行：
$ pod install
如果是：
Re-creating CocoaPods due to major version update.Setting up CocoaPods master repo
命令被墙
换做：
$ pod install --verbose --no-repo-update
三、添加react-native项目
1.在原生ios应用中添加一个视图容器，用于展示react-native实现的内容
工程文件下创建一个名为ReactView的UIView文件:
**RNProjectName目录 -> 右键 -> New File -> Cocoa Touch Class -> ReactView **
修改ReactView.h文件
#import <UIKit/UIKit.h> @interface ReactView : UIView @end
修改ReactView.m文件
#import "ReactView.h"
#import <RCTRootView.h> @implementation ReactView /* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect { // Drawing code } */
- (instancetype)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"; NSURL * jsCodeLocation = [NSURL URLWithString:strUrl]; RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"SimpleApp" initialProperties:nil launchOptions:nil]; [self addSubview:rootView]; rootView.frame = self.bounds; } return self; } @end
ReactView.m中通过http://localhost:8081/index.ios.bundle?platform=ios&dev=true 加载bundle文件，由RCTRootView解析转化原生的UIView，然后通过initWithFrame将frame暴露出去。
2.在原生应用中引入上面的View
打开ViewController.m，在viewDidLoad方法中引用ReactView。
#import "ViewController.h"
#import "ReactView.h" @interface ViewController () @property (weak, nonatomic) IBOutlet ReactView *reactView; @end @implementation ViewController
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)]; [self.view addSubview:reactView]; }
- (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
四、配置调试
1.开启调试模式
在项目根目录下运行
(JS_DIR=`pwd`/RN; cd node_modules/react-native; npm run start -- --root $JS_DIR)
这条命令会启动一个React Native开发服务器，用于构建我们的bundle文件。--root选项用来标明你的React Native应用所在的根目录。这里是RN目录，里面有一个index.ios.js文件。开发服务器启动后会打包出index.ios.bundle文件来，并可以通过http://localhost:8081/index.ios.bundle 来访问。
运行后会出现下面的错误
Could not connect to development server.
2.打开工程中的 Info.list文件，添加下面配置：
<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>
完成
相关资料：
最新版 CocoaPods 的安装流程
reactnative与现有原生ios项目集成
植入原生应用（react-native中文网）
