最近由于過年剛回來，就看了下RN，覺得還不錯，就搞了一下把RN集成到iOS原生項目中，然后和大家分享一下。
由于React并沒有假設你其余部分的技術棧——它通常只作為MVC模型中的V存在——它也很容易嵌入到一個并非由React Native開發的應用當中。實際上，它可以和常見的許多工具結合，譬如CocoaPods。
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)"http://安裝Node.jsbrew install node2) 安裝React Native的命令行工具（react-native-cli）
npm install -g react-native-cli如果之前已經安裝并使用過CocoaPods，請忽略這一步（相信只要是iOS開發，一定大多數都接觸過了哈）。 若沒有安裝，則運行命令如下：
gem install cocoa pods//權限不夠則運行下面一句sudo gem install cocoapods在項目中建一個名為ReactComponent的文件夾, 用于存放我們react-native的相關文件, 再創建一個package.json文件, 用于初始化react-native.（文件夾名字自定義哈） 文件目錄結構如下： 
創建package.json文件，文件內容如下：
在ReactComponent目錄下運行命令行：
npm install運行效果如下： 
這里很需要耐心，曾經的我看著毫無反應的控制臺就放棄了n次。 可能靜下心去看部動漫回來就會發現它只想成功了。 實在install不回來的話，如果之前有創建過React Native項目，把里面的node_modules直接拷貝過來，也是沒有問題（個人嘗試過）。
在ReactComponent文件夾里創建index.ios.js文件，作為js文件入口。 
index.ios.js文件內容如下：
若原項目無使用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運行效果： 
下面的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項目結構如下： 
在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>配置效果如下： 
在運行我們的項目之前，我們需要先啟動我們的開發服務器。進入 reactnative目錄 ,然后命令行啟動服務：
react-native start記得在切換到之前創建的package.json文件目錄下執行命令行。
運行成功效果如下： 
可以成功看到上面的界面，那就恭喜集成成功了。之前弄這個弄了一兩天，主要卡在npm install不回來那一步，然后pod是不可能的。。寫個更加詳細的教程希望大家能更輕松的把React Native集成到原生項目中哈，有問題歡迎留言哈。此文轉載之朱_源浩
新聞熱點
疑難解答
