React Native 集成到原生项目(iOS)

最近由于过年刚回来，就看了下RN，觉得还不错，就搞了一下把RN集成到iOS原生项目中，然后和大家分享一下。

---

由于React并没有假设你其余部分的技术栈——它通常只作为MVC模型中的V存在——它也很容易嵌入到一个并非由React Native开发的应用当中。实际上，它可以和常见的许多工具结合，譬如CocoaPods。

一、准备工作

1. React Native 开发基础环境

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.js
brew install node

2) 安装React Native的命令行工具（react-native-cli）

npm install -g react-native-cli

2. 安装CocoaPods

如果之前已经安装并使用过CocoaPods，请忽略这一步（相信只要是iOS开发，一定大多数都接触过了哈）。
若没有安装，则运行命令如下：

gem install  cocoa pods
//权限不够则运行下面一句
sudo gem install cocoapods

二、集成React Native

1. 安装React Native

1）创建ReactComponent文件夹和配置文件

在项目中建一个名为ReactComponent的文件夹, 用于存放我们react-native的相关文件, 再创建一个package.json文件, 用于初始化react-native.（文件夹名字自定义哈）
文件目录结构如下：

创建package.json文件，文件内容如下：

{
  "name": "NativeRNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.2.1",
    "react-native": "0.29.2"
  }
}

其中，name为项目名称。dependencies里为react和react-native的版本信息。
建议利用react-native init AwesomeProject新建新项目时会自动创建package.json，直接把文件复制过来，更改name为自己的原生项目名，以确保react、和react-native的版本最新哈。

2）安装React Native依赖包

在ReactComponent目录下运行命令行：

npm install

运行效果如下：

这里很需要耐心，曾经的我看着毫无反应的控制台就放弃了n次。
可能静下心去看部动漫回来就会发现它只想成功了。
实在install不回来的话，如果之前有创建过React Native项目，把里面的node_modules直接拷贝过来，也是没有问题（个人尝试过）。

2. 创建 index.ios.js（js文件入口）

在ReactComponent文件夹里创建index.ios.js文件，作为js文件入口。

index.ios.js文件内容如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class NativeRNApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const 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('NativeRNApp', () => NativeRNApp);

3. Cocoapods集成React Native

若原项目无使用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

运行效果：

三、原生项目处理

1. 向对应ViewController 添加RCTRootView

下面的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

项目结构如下：

2. iOS项目更新App Transport Security

在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>

配置效果如下：

3启动开发服务器

在运行我们的项目之前，我们需要先启动我们的开发服务器。进入 reactnative目录 ,然后命令行启动服务：

react-native start

记得在切换到之前创建的package.json文件目录下执行命令行。

4. 运行iOS项目

运行成功效果如下：

可以成功看到上面的界面，那就恭喜集成成功了。之前弄这个弄了一两天，主要卡在npm install不回来那一步，然后pod是不可能的。。写个更加详细的教程希望大家能更轻松的把React Native集成到原生项目中哈，有问题欢迎留言哈。此文转载之朱_源浩