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

想了好久，要先介绍各类组件的实际应用好，仍是先介绍怎么把React Native集成到原生项目好。
由于想起，一旦开始写各类组件的应用，就会花很长很长的篇幅，会把这个挺重要的内容抛到好远，而集成到原生项目又是不少人所须要学习的（像我同样哈，直接替代现有的项目是不科学的，做为一个模块集合进去才比较现实），因此决定了，仍是先花两个篇章写写怎么将React Native集成到原生项目以及JS与原生之间简单的交互。

因为React并无假设你其他部分的技术栈——它一般只做为MVC模型中的V存在——它也很容易嵌入到一个并不是由React Native开发的应用当中。实际上，它能够和常见的许多工具结合，譬如CocoaPods。

1、准备工做

1. React Native 开发基础环境

这个能够直接参考我写的第二篇文章React Native 环境搭建和建立项目(Mac)。若是已经按上篇文章操做过，或者说已经在Mac平台已经成功运行过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安装React Native的方式，比较支持使用，也比较简单直接。
若依旧不想使用CocoaPods，想直接集成的朋友能够参考下面两篇文章：
1)【iOS&Android】RN学习3——集成进现有原生项目
2) reactnative集成到原生ios项目 文中的手动集成react-native

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

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

2、集成React Native

1. 安装React Native

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

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

文件目录结构1.png

建立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

运行效果以下：

npm install.png

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

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

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

目录结构2.png

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相关代码）
目录结构以下：

目录结构3.png

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

运行效果：

pod install.png

3、原生项目处理

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

项目结构以下：

项目结构.png

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>

配置效果以下：

App Transport Security配置.png

3. 启动开发服务器

在运行咱们的项目以前，咱们须要先启动咱们的开发服务器。进入 reactnative目录 ,而后命令行启动服务：

react-native start

4. 运行iOS项目

运行成功效果以下：

运行效果.png

能够成功看到上面的界面，那就恭喜集成成功了。以前弄这个弄了一两天，主要卡在npm install不回来那一步，而后pod是不可能的。。写个更加详细的教程但愿你们能更轻松的把React Native集成到原生项目中哈，有问题欢迎留言哈。

目前暂时把demo打包到本身的百度云(之后再想办法放到github)：
https://pan.baidu.com/s/1hrKnlvm

讲完了怎么把React Native集成到原生项目，下一篇打算写React Native和原生项目之间的交互，而后还有好多好多和组件以及其它知识点都还没写，须要长期的坚持(😂略累)，望支持♪───Ｏ（≧∇≦）Ｏ────♪

正在写React Native的学习教程ing，是一边研究一边编写的，已有的成果以下(不断更新哈，望鼓励)：
1) React Native 简介与入门
2) React Native 环境搭建和建立项目(Mac)
3) React Native 开发之IDE
4) React Native 入门项目与解析
5) React Native 相关JS和React基础
6) React Native 组件生命周期(ES6)
7) React Native 集成到原生项目(iOS)
8) React Native 与原生之间的通讯(iOS)
9) React Native 封装原生ＵI组件(iOS)