想了很久，要先介紹各種組件的實際應用好，還是先介紹怎么把React Native集成到原生項目好。因為想起，一旦開始寫各種組件的應用，就會花很長很長的篇幅，會把這個挺重要的內容拋到好遠，而集成到原生項目又是很多人所需要學習的（像我一樣哈，直接替代現有的項目是不科學的，作為一個模塊集合進去才比較現實），所以決定了，還是先花兩個篇章寫寫怎么將React Native集成到原生項目以及JS與原生之間簡單的交互。

由于React并沒有假設你其余部分的技術棧——它通常只作為MVC模型中的V存在——它也很容易嵌入到一個并非由React Native開發的應用當中。實際上，它可以和常見的許多工具結合，譬如CocoaPods。

一、準備工作

1. React Native 開發基礎環境

這個可以直接參考我寫的第二篇文章React Native 環境搭建和創建項目(Mac)。如果已經按上篇文章操作過，或者說已經在Mac平臺已經成功運行過React Native應用，那肯定是已經有了開發基礎環境，可以直接忽略這一步。

1) 安裝Node.js方式一：安裝 nvm（安裝向導在這里）。然后運行命令行如下：

這將會默認安裝最新版本的Node.js并且設置好命令行的環境變量，這樣你可以輸入node命令來啟動Node.js環境。nvm使你可以可以同時安裝多個版本的Node.js，并且在這些版本之間輕松切換。方式二：先安裝Homebrew，再利用Homebrew安裝Node.js，運行命令行如下：

2) 安裝React Native的命令行工具（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

二、集成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

三、原生項目處理

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集成到原生項目中哈，有問題歡迎留言哈。

---

講完了怎么把React Native集成到原生項目，下一篇打算寫React Native和原生項目之間的交互，然后還有好多好多和組件以及其它知識點都還沒寫，需要長期的堅持(