想了很久拇舀，要先介紹各種組件的實際應(yīng)用好变抽，還是先介紹怎么把React Native集成到原生項目好。
因為想起掠抬，一旦開始寫各種組件的應(yīng)用吼野，就會花很長很長的篇幅，會把這個挺重要的內(nèi)容拋到好遠(yuǎn)两波，而集成到原生項目又是很多人所需要學(xué)習(xí)的（像我一樣哈瞳步，直接替代現(xiàn)有的項目是不科學(xué)的，作為一個模塊集合進(jìn)去才比較現(xiàn)實）腰奋，所以決定了单起，還是先花兩個篇章寫寫怎么將React Native集成到原生項目以及JS與原生之間簡單的交互。
由于React并沒有假設(shè)你其余部分的技術(shù)椃斩椋——它通常只作為MVC模型中的V存在——它也很容易嵌入到一個并非由React Native開發(fā)的應(yīng)用當(dāng)中馏臭。實際上，它可以和常見的許多工具結(jié)合讼稚，譬如CocoaPods括儒。
一、準(zhǔn)備工作
1. React Native 開發(fā)基礎(chǔ)環(huán)境
這個可以直接參考我寫的第二篇文章React Native 環(huán)境搭建和創(chuàng)建項目(Mac)锐想。如果已經(jīng)按上篇文章操作過帮寻，或者說已經(jīng)在Mac平臺已經(jīng)成功運行過React Native應(yīng)用，那肯定是已經(jīng)有了開發(fā)基礎(chǔ)環(huán)境赠摇，可以直接忽略這一步固逗。
1) 安裝Node.js
方式一：
安裝 nvm（安裝向?qū)г?a target="_blank" rel="nofollow">這里）。然后運行命令行如下：
nvm install node && nvm alias default node
這將會默認(rèn)安裝最新版本的Node.js并且設(shè)置好命令行的環(huán)境變量藕帜，這樣你可以輸入node命令來啟動Node.js環(huán)境烫罩。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學(xué)習(xí)3——集成進(jìn)現(xiàn)有原生項目
- reactnative集成到原生ios項目 文中的手動集成react-native
如果之前已經(jīng)安裝并使用過CocoaPods梨熙，請忽略這一步（相信只要是iOS開發(fā)开镣，一定大多數(shù)都接觸過了哈）。
若沒有安裝咽扇，則運行命令如下：
gem install cocoa pods
//權(quán)限不夠則運行下面一句
sudo gem install cocoapods
二邪财、集成React Native
1. 安裝React Native
1）創(chuàng)建ReactComponent文件夾和配置文件
在項目中建一個名為ReactComponent的文件夾, 用于存放我們react-native的相關(guān)文件, 再創(chuàng)建一個package.json文件, 用于初始化react-native.（文件夾名字自定義哈）
文件目錄結(jié)構(gòu)如下：
創(chuàng)建package.json文件，文件內(nèi)容如下：
{
"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新建新項目時會自動創(chuàng)建package.json把敞，直接把文件復(fù)制過來弥奸，更改name為自己的原生項目名，以確保react奋早、和react-native的版本最新哈盛霎。
2）安裝React Native依賴包
在ReactComponent目錄下運行命令行：
npm install
運行效果如下：
這里很需要耐心，曾經(jīng)的我看著毫無反應(yīng)的控制臺就放棄了n次耽装。
可能靜下心去看部動漫回來就會發(fā)現(xiàn)它只想成功了愤炸。
實在install不回來的話，如果之前有創(chuàng)建過React Native項目掉奄，把里面的node_modules直接拷貝過來规个，也是沒有問題（個人嘗試過）。
2. 創(chuàng)建 index.ios.js（js文件入口）
在ReactComponent文件夾里創(chuàng)建index.ios.js文件姓建，作為js文件入口诞仓。
index.ios.js文件內(nèi)容如下：
/**
* 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,
},
});
// 項目名要有所對應(yīng)
AppRegistry.registerComponent('NativeRNApp', () => NativeRNApp);
3. Cocoapods集成React Native
若原項目無使用Cocoapods，則在根目錄下創(chuàng)建Podfile速兔。（有則直接添加pod相關(guān)代碼）
目錄結(jié)構(gòu)如下：
Podfile文件內(nèi)容為（需確保路徑對）：
platform :ios, “7.0”
# 取決于你的工程如何組織墅拭，你的node_modules文件夾可能會在別的地方。
# 請將:path后面的內(nèi)容修改為正確的路徑（一定要確保正確～～）涣狗。
pod 'React', :path => ‘./ReactComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
]
#需要的模塊依賴進(jìn)來便可谍婉，這里是為了舉例子，列舉所有的模塊
然后在根目錄執(zhí)行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. 向?qū)?yīng)ViewController 添加RCTRootView
下面的ReactViewController是我創(chuàng)建的專門放React Native模塊的ViewController穗熬，有必要的話也可對RCTRootView進(jìn)行進(jìn)一步封裝（就不用每次都重新配置一次）。
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
項目結(jié)構(gòu)如下：
2. iOS項目更新App Transport Security
在iOS 9以上的系統(tǒng)中死陆，除非明確指明，否則應(yīng)用無法通過http協(xié)議連接到localhost主機唧瘾。 我們建議你在Info.plist文件中將localhost列為App Transport Security的例外措译。 如果不這樣做，在嘗試通過http連接到服務(wù)器時饰序，會遭遇這個錯誤 - 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. 啟動開發(fā)服務(wù)器
在運行我們的項目之前，我們需要先啟動我們的開發(fā)服務(wù)器求豫。進(jìn)入 reactnative目錄 ,然后命令行啟動服務(wù)：
react-native start
4. 運行iOS項目
運行成功效果如下：
可以成功看到上面的界面塌衰，那就恭喜集成成功了。之前弄這個弄了一兩天蝠嘉，主要卡在npm install不回來那一步最疆，然后pod是不可能的。蚤告。寫個更加詳細(xì)的教程希望大家能更輕松的把React Native集成到原生項目中哈努酸，有問題歡迎留言哈。
目前暫時把demo打包到自己的百度云(以后再想辦法放到github)：
https://pan.baidu.com/s/1hrKnlvm
因為沒繼續(xù)這方面的工作所以好久沒更新了杜恰，可能代碼因為rn的更新會有些問題获诈，最好更新下pod的版本卵皂，看看官方文檔皂林，看到評論里有相應(yīng)的討論，出現(xiàn)問題的朋友最好也看看評論哈哈获列，可能有解決綁法?───Ｏ（≧?≦）Ｏ────?
已有的成果如下：
1) React Native 簡介與入門
2) React Native 環(huán)境搭建和創(chuàng)建項目(Mac)
3) React Native 開發(fā)之IDE
4) React Native 入門項目與解析
5) React Native 相關(guān)JS和React基礎(chǔ)
6) React Native 組件生命周期(ES6)
7) React Native 集成到原生項目(iOS)
8) React Native 與原生之間的通信(iOS)
9) React Native 封裝原生ＵI組件(iOS)
