ios原生植入RN

一、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 , Michal Papis  [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 ( This is a simple application. ) } } 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 @interface ReactView : UIView @end

修改ReactView.m文件
#import "ReactView.h"
#import @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文件，添加下面配置：

NSAppTransportSecurity NSExceptionDomains localhost NSTemporaryExceptionAllowsInsecureHTTPLoads