核心概念
如果你正準(zhǔn)備從頭開始制作一個新的應(yīng)用，那么React Native會是個非常好的選擇譬涡。但如果你只想給現(xiàn)有的原生應(yīng)用中添加一兩個視圖或是業(yè)務(wù)流程闪幽，React Native也同樣不在話下。只需簡單幾步昂儒，你就可以給原有應(yīng)用加上新的基于React Native的特性沟使、畫面和視圖等。
把React Native組件植入到iOS應(yīng)用中有如下幾個主要步驟：
1.首先當(dāng)然要了解你要植入的React Native組件渊跋。
2.創(chuàng)建一個Podfile腊嗡，在其中以subspec的形式填寫所有你要植入的React Native的組件。
3.創(chuàng)建js文件拾酝，編寫React Native組件的js代碼燕少。
4.添加一個事件處理函數(shù)，用于創(chuàng)建一個RCTRootView蒿囤。這個RCTRootView正是用來承載你的React Native組件的客们，而且它必須對應(yīng)你在index.ios.js中使用AppRegistry注冊的模塊名字。
5.啟動React Native的Packager服務(wù)材诽，運行應(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)前的項目中
React Native的植入過程同時需要React和React Native兩個node依賴包沸手。
我們把具體的依賴包記錄在package.json(Sublime Textc創(chuàng)建)文件中。如果項目根目錄中沒有這個文件注簿，那就自己創(chuàng)建一個契吉。
對于一個典型的React Native項目來說，一般package.json和index.ios.js等文件會放在項目的根目錄下诡渴。而iOS相關(guān)的原生代碼會放在一個名為ios/的子目錄中,這里也同時放著你的Xcode項目文件（.xcodeproj）捐晶。
下面是一個最簡單的package.json的內(nèi)容示例。
示例中的version字段沒有太大意義（除非你要把你的項目發(fā)布到npm倉庫）玩徊。scripts中是用于啟動packager服務(wù)的命令租悄。dependencies中的react和react-native的版本取決于你的具體需求。一般來說我們推薦使用最新版本恩袱。你可以使用npm info react和npm info react-native來查看當(dāng)前的最新版本泣棋。另外，react-native對react的版本有嚴(yán)格要求畔塔，高于或低于某個范圍都不可以潭辈。本文無法在這里列出所有react native和對應(yīng)的react版本要求，只能提醒讀者先嘗試執(zhí)行npm install澈吨，然后注意觀察安裝過程中的報錯信息把敢，例如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模塊桑阶。這些模塊會被安裝到項目根目錄下的node_modules/目錄中柏副。 在包含有package.json文件的目錄（一般也就是項目根目錄）中運行下列命令來安裝：
$ npm install
React Native框架整體是作為node模塊安裝到項目中的。下一步我們需要在CocoaPods的Podfile中指定我們所需要使用的組件蚣录。
在你開始把React Native植入到你的應(yīng)用中之前割择，首先要決定具體整合的是React Native框架中的哪些部分。而這就是subspec要做的工作萎河。在創(chuàng)建Podfile文件的時候荔泳，需要指定具體安裝哪些React Native的依賴庫。所指定的每一個庫就稱為一個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ù)實際路徑修改下面的`:path`
pod'React',:path =>'../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTActionSheet',
'RCTImage',
'RCTNetwork',
'RCTWebSocket',#這個模塊是用于調(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)報錯: (格式和路徑都沒有問題 .......)
后來才看出來自己是直接在iOS工程里集成的根目錄的問題 ?之后將path路徑兩位小數(shù)點改成一位就沒問題 執(zhí)行pod install成功.
現(xiàn)在我們已經(jīng)準(zhǔn)備好了所有依賴，可以開始著手修改原生代碼來把React Native真正植入到應(yīng)用中了顿仇。在我們的2048示例中淘正，首先嘗試添加一個顯示有"High Score"（得分排行榜）的React Native頁面。
React Native組件:創(chuàng)建一個index.ios.js文件
首先創(chuàng)建一個空的index.ios.js文件臼闻。一般來說我們把它放置在項目根目錄下鸿吆。
index.ios.js是React Native應(yīng)用在iOS上的入口文件。而且它是不可或缺的述呐！它可以是個很簡單的文件惩淳，簡單到可以只包含一行require/import導(dǎo)入語句。本教程中為了簡單示范乓搬，把全部的代碼都寫到了index.ios.js里（當(dāng)然實際開發(fā)中我們并不推薦這樣做）思犁。
# 在項目根目錄執(zhí)行以下命令創(chuàng)建文件：$ touch index.ios.js
添加你自己的React Native代碼:
RCTRootView集成:?
新建一個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;
測試運行: ??由于請求是http的 修改info.plist:
運行Packager ? ?$ npm start ?執(zhí)行成功如圖:
運行應(yīng)用
如果你使用的是Xcode，那么照常編譯和運行應(yīng)用即可缤谎。如果你沒有使用Xcode（但是你仍然必須安裝Xcode）抒倚，則可以在命令行中使用以下命令來運行應(yīng)用：
在項目的根目錄中執(zhí)行： $ react-native run-ios ?
運行成功如下圖:
