核心概念
如果你正準(zhǔn)備從頭開始制作一個(gè)新的應(yīng)用，那么React Native會是個(gè)非常好的選擇。但如果你只想給現(xiàn)有的原生應(yīng)用中添加一兩個(gè)視圖或是業(yè)務(wù)流程，React Native也同樣不在話下。只需簡單幾步，你就可以給原有應(yīng)用加上新的基于React Native的特性、畫面和視圖等。
把React Native組件植入到iOS應(yīng)用中有如下幾個(gè)主要步驟：
1.首先當(dāng)然要了解你要植入的React Native組件。
2.創(chuàng)建一個(gè)Podfile，在其中以subspec的形式填寫所有你要植入的React Native的組件。
3.創(chuàng)建js文件，編寫React Native組件的js代碼。
4.添加一個(gè)事件處理函數(shù)，用于創(chuàng)建一個(gè)RCTRootView。這個(gè)RCTRootView正是用來承載你的React Native組件的，而且它必須對應(yīng)你在index.ios.js中使用AppRegistry注冊的模塊名字。
5.啟動React Native的Packager服務(wù)，運(yùn)行應(yīng)用。
6.根據(jù)需要添加更多React Native的組件。
7.調(diào)試。
8.準(zhǔn)備部署發(fā)布 （比如可以利用react-native-xcode.sh腳本）。
9.發(fā)布應(yīng)用。
開發(fā)環(huán)境準(zhǔn)備
基礎(chǔ)環(huán)境
首先按照開發(fā)環(huán)境搭建教程來安裝React Native在iOS平臺上所需的一切依賴軟件（比如npm）。
CocoaPods
CocoaPods是針對iOS和Mac開發(fā)的包管理工具。我們用它來把React Native框架的代碼下載下來并添加到你當(dāng)前的項(xiàng)目中
React Native的植入過程同時(shí)需要React和React Native兩個(gè)node依賴包。
我們把具體的依賴包記錄在package.json(Sublime Textc創(chuàng)建)文件中。如果項(xiàng)目根目錄中沒有這個(gè)文件，那就自己創(chuàng)建一個(gè)。
對于一個(gè)典型的React Native項(xiàng)目來說，一般package.json和index.ios.js等文件會放在項(xiàng)目的根目錄下。而iOS相關(guān)的原生代碼會放在一個(gè)名為ios/的子目錄中,這里也同時(shí)放著你的Xcode項(xiàng)目文件（.xcodeproj）。
下面是一個(gè)最簡單的package.json的內(nèi)容示例。
示例中的version字段沒有太大意義（除非你要把你的項(xiàng)目發(fā)布到npm倉庫）。scripts中是用于啟動packager服務(wù)的命令。dependencies中的react和react-native的版本取決于你的具體需求。一般來說我們推薦使用最新版本。你可以使用npm info react和npm info react-native來查看當(dāng)前的最新版本。另外，react-native對react的版本有嚴(yán)格要求，高于或低于某個(gè)范圍都不可以。本文無法在這里列出所有react native和對應(yīng)的react版本要求，只能提醒讀者先嘗試執(zhí)行npm install，然后注意觀察安裝過程中的報(bào)錯(cuò)信息，例如require react@某.某.某版本, but none was installed，然后根據(jù)這樣的提示，執(zhí)行npm i -S react@某.某.某版本。
{
"name": "ExerciseOne",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0"
}
}
使用npm（node包管理器，Node package manager）來安裝React和React Native模塊。這些模塊會被安裝到項(xiàng)目根目錄下的node_modules/目錄中。 在包含有package.json文件的目錄（一般也就是項(xiàng)目根目錄）中運(yùn)行下列命令來安裝：
$ npm install
React Native框架整體是作為node模塊安裝到項(xiàng)目中的。下一步我們需要在CocoaPods的Podfile中指定我們所需要使用的組件。
在你開始把React Native植入到你的應(yīng)用中之前，首先要決定具體整合的是React Native框架中的哪些部分。而這就是subspec要做的工作。在創(chuàng)建Podfile文件的時(shí)候，需要指定具體安裝哪些React Native的依賴庫。所指定的每一個(gè)庫就稱為一個(gè)subspec。
可用的subspec都列在node_modules/react-native/React.podspec中，基本都是按其功能命名的。一般來說你首先需要添加Core，這一subspec包含了必須的AppRegistry、StyleSheet、View以及其他的一些React Native核心庫。如果你想使用React Native的Text庫（即組件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。
在React和React Native模塊成功安裝到node_modules目錄之后，你就可以開始創(chuàng)建Podfile以便選擇所需的組件安裝到應(yīng)用中。
創(chuàng)建Podfile的最簡單的方式就是在iOS原生代碼所在的目錄中使用CocoaPods的init命令：
## 在iOS原生代碼所在的目錄中（也就是`.xcodeproj`文件所在的目錄）執(zhí)行：$ pod init
Podfile會創(chuàng)建在執(zhí)行命令的目錄中。你需要調(diào)整其內(nèi)容以滿足你的植入需求。調(diào)整后的Podfile的內(nèi)容看起來類似下面這樣：
platform :ios,'8.0'
target'ExerciseOne'do
pod'AFNetworking','3.1.0'
pod'YTKNetwork','2.0.3'
pod'MJExtension'
pod'Reachability'
pod'MBProgressHUD'
pod'BabyBluetooth','~> 0.7.0'
# 'node_modules'目錄一般位于根目錄中
#但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod'React',:path =>'../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTActionSheet',
'RCTImage',
'RCTNetwork',
'RCTWebSocket',#這個(gè)模塊是用于調(diào)試功能的
#在這里繼續(xù)添加你所需要的模塊
]
#如果你的RN版本>= 0.42.0，請加入下面這行
pod"Yoga", :path =>"../node_modules/react-native/ReactCommon/yoga"
end
Pod安裝
創(chuàng)建好了Podfile后，就可以開始安裝React Native的pod包了。
$ pod install
ps:在按照官網(wǎng)的書寫模式后 我執(zhí)行pod install 后出現(xiàn)報(bào)錯(cuò): (格式和路徑都沒有問題 .......)
后來才看出來自己是直接在iOS工程里集成的根目錄的問題 ?之后將path路徑兩位小數(shù)點(diǎn)改成一位就沒問題 執(zhí)行pod install成功.
現(xiàn)在我們已經(jīng)準(zhǔn)備好了所有依賴，可以開始著手修改原生代碼來把React Native真正植入到應(yīng)用中了。在我們的2048示例中，首先嘗試添加一個(gè)顯示有"High Score"（得分排行榜）的React Native頁面。
React Native組件:創(chuàng)建一個(gè)index.ios.js文件
首先創(chuàng)建一個(gè)空的index.ios.js文件。一般來說我們把它放置在項(xiàng)目根目錄下。
index.ios.js是React Native應(yīng)用在iOS上的入口文件。而且它是不可或缺的！它可以是個(gè)很簡單的文件，簡單到可以只包含一行require/import導(dǎo)入語句。本教程中為了簡單示范，把全部的代碼都寫到了index.ios.js里（當(dāng)然實(shí)際開發(fā)中我們并不推薦這樣做）。
# 在項(xiàng)目根目錄執(zhí)行以下命令創(chuàng)建文件：$ touch index.ios.js
添加你自己的React Native代碼:
RCTRootView集成:?
新建一個(gè)UIViewController中執(zhí)行:?
NSURL*jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=ture"];
NSDictionary*dic =@{@"scores":@[@{@"name":@"Alex",@"value":@"42"},@{@"name":@"Joel",@"value":@"10"}]};
RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocationmoduleName:@"ExerciseOne"initialProperties:diclaunchOptions:nil];
self.view= rootView;
測試運(yùn)行: ??由于請求是http的 修改info.plist:
運(yùn)行Packager ? ?$ npm start ?執(zhí)行成功如圖:
運(yùn)行應(yīng)用
如果你使用的是Xcode，那么照常編譯和運(yùn)行應(yīng)用即可。如果你沒有使用Xcode（但是你仍然必須安裝Xcode），則可以在命令行中使用以下命令來運(yùn)行應(yīng)用：
在項(xiàng)目的根目錄中執(zhí)行： $ react-native run-ios ?
運(yùn)行成功如下圖:
