1 安裝 Homebrew
Homebrew是神馬 類比cocoapods
linux系統(tǒng)有個(gè)讓人蛋疼的通病偏形，軟件包依賴宾肺，好在當(dāng)前主流的兩大發(fā)行版本都自帶了解決方案，Red hat有yum，Ubuntu有apt-get
神馬，你用mac os抵皱，不好意Mac os木有類似的東東，淚奔中幾經(jīng)折騰總算找到了第三方支持：Homebrew辩蛋，Homebrew簡(jiǎn)稱brew呻畸，是Mac OSX上的軟件包管理工具，能在Mac中方便的安裝軟件或者卸載軟件堪澎，可以說Homebrew就是mac下的apt-get擂错、yum神器
Homebrew安裝
ruby?-e"$(curl?-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
2 安裝Javascript運(yùn)行環(huán)境 ?Node.js
看到Node.js這個(gè)名字，初學(xué)者可能會(huì)誤以為這是一個(gè)Javascript應(yīng)用樱蛤，事實(shí)上钮呀，Node.js采用C++語言編寫而成，是一個(gè)Javascript的運(yùn)行環(huán)境昨凡。為什么采用C++語言呢？據(jù)Node.js創(chuàng)始人Ryan Dahl回憶，他最初希望采用Ruby來寫Node.js鲤拿，但是后來發(fā)現(xiàn)Ruby虛擬機(jī)的性能不能滿足他的要求沥阳，后來他嘗試采用V8引擎，所以選擇了C++語言哪痰。既然不是Javascript應(yīng)用遂赠，為何叫.js呢？因?yàn)镹ode.js是一個(gè)Javascript的運(yùn)行環(huán)境晌杰。提到Javascript跷睦，大家首先想到的是日常使用的瀏覽器，現(xiàn)代瀏覽器包含了各種組件肋演，包括渲染引擎抑诸、Javascript引擎等，其中Javascript引擎負(fù)責(zé)解釋執(zhí)行網(wǎng)頁中的Javascript代碼爹殊。作為Web前端最重要的語言之一蜕乡，Javascript一直是前端工程師的專利。不過梗夸，Node.js是一個(gè)后端的Javascript運(yùn)行環(huán)境（支持的系統(tǒng)包括*nux层玲、Windows），這意味著你可以編寫系統(tǒng)級(jí)或者服務(wù)器端的Javascript代碼反症，交給Node.js來解釋執(zhí)行辛块，簡(jiǎn)單的命令類似于：
#node helloworld.js
Node.js采用了Google Chrome瀏覽器的V8引擎，性能很好惰帽，同時(shí)還提供了很多系統(tǒng)級(jí)的API憨降，如文件操作、網(wǎng)絡(luò)編程等该酗。瀏覽器端的Javascript代碼在運(yùn)行時(shí)會(huì)受到各種安全性的限制授药，對(duì)客戶系統(tǒng)的操作有限。相比之下呜魄，Node.js則是一個(gè)全面的后臺(tái)運(yùn)行時(shí)悔叽，為Javascript提供了其他語言能夠?qū)崿F(xiàn)的許多功能。
brew install node
3 安裝 ? ? ?React 和 React Native依賴
在你JS代碼文件所在目錄下爵嗅，安裝React和React Native依賴：
npm install react
npm install react-native
或者直接運(yùn)行 npm install ? 類比 pod install pod 需要一個(gè)pod file文件 ?執(zhí)行npm 同樣也需要一個(gè)文件娇澎，文件名稱是package.json 文件
Package.json 屬性
name- 包的名稱
version- 包的版本
description- 包的描述
homepage- 包的網(wǎng)站主頁
author- 包的作者
contributors- 包的貢獻(xiàn)者的名稱列表
dependencies- 依賴性列表。npm自動(dòng)安裝所有在node_module文件夾中的包提到的依賴關(guān)系睹晒。
repository- 包的存儲(chǔ)庫類型和URL
main- 包的入口點(diǎn)
keywords- 關(guān)鍵字
4 ?通過CocoaPods安裝React Native
CocoaPods是iOS/Mac開發(fā)最常用的包管理工具趟庄。我們需要用它來引入React Native括细。如果你還沒安裝過CocoaPods，參考這篇文章戚啥。
當(dāng)你準(zhǔn)備好開始使用CocoaPods之后奋单，往Podfile中增加以下的內(nèi)容。如果你還沒有這個(gè)文件猫十，在你工程的根目錄下創(chuàng)建一個(gè)览濒。
# 取決于你的工程如何組織，你的node_modules文件夾可能會(huì)在別的地方拖云。# 請(qǐng)將:path后面的內(nèi)容修改為正確的路徑贷笛。
pod'React',:path=>'./node_modules/react-native',:subspecs=> ['Core','RCTImage','RCTNetwork','RCTText','RCTWebSocket',# 添加其他你想在工程中使用的依賴。]
記得要添加所有你需要的依賴宙项。舉例來說乏苦，元素如果不添加RCTText依賴就不能運(yùn)行。
接著安裝你的pods：
$?pod install
創(chuàng)建你的React Native應(yīng)用
有兩個(gè)地方需要準(zhǔn)備：
入口JavaScript文件必須要包含你實(shí)際的React Native應(yīng)用和其他的組件杉允。
封裝Objective-C代碼邑贴，加載你的腳本并創(chuàng)建一個(gè)RCTRootView來顯示和管理你的React Native組件。
首先叔磷，創(chuàng)建一個(gè)文件夾來保存你的React代碼拢驾，然后創(chuàng)建一個(gè)index.ios.js文件。
$?mkdir?ReactComponent
$?touch?ReactComponent/index.ios.js
然后復(fù)制并粘貼一個(gè)index.ios.js的初始代碼——這是一個(gè)簡(jiǎn)單的React Native應(yīng)用：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class ReactNativeApp extends Component {
render() {
return (
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 222,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('ReactNativeApp', () => ReactNativeApp);
ReactNativeApp就是你的模塊名改基，這個(gè)在后面會(huì)要用到繁疤。
在想要管理這個(gè)視圖的視圖管理器中，添加一個(gè)outlet然后連接它：
//?ViewController.m
@interfaceViewController?()
@property(nonatomic,strong)? RCTRootView *rootView;;
@end
準(zhǔn)備好開始最有意思的部分了嗎秕狰？現(xiàn)在我們要?jiǎng)?chuàng)建RCTRootView來包含你的React Native應(yīng)用稠腊。
在ReactView.m中，我們需要先使用你的index.ios.bundle的URI來初始化RCTRootView鸣哀。index.ios.bundle會(huì)由packager服務(wù)創(chuàng)建架忌，可以通過React Native服務(wù)器訪問到。我們會(huì)在后面討論這個(gè)問題我衬。
NSURL*jsCodeLocation?=?[NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
//?For?production?use,?this?`NSURL`?could?instead?point?to?a?pre-bundled?file?on?disk:
//
//? ?NSURL?*jsCodeLocation?=?[[NSBundle?mainBundle]?URLForResource:@"main"?withExtension:@"jsbundle"];
//
//?generated?by?"Bundle?React?Native?code?and?images"?build?step.
//
//? ?curlhttp://localhost:8081/index.ios.bundle-o?main.jsbundle
_rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"AwesomeProject"
initialProperties:nil
launchOptions:launchOptions];
self.view =rootView;
譯注：這一部分的官方文檔都有一些過時(shí)。翻譯組在翻譯&審校完其它部分的文檔后挠羔，如果官方文檔還沒有更新井仰，會(huì)幫助校正官方文檔的同時(shí)翻譯中文文檔。
在工程的根目錄下破加，我們可以開啟React Native開發(fā)服務(wù)器：
(JS_DIR=`pwd`/ReactComponent;cdnode_modules/react-native; npmrunstart -- --root$JS_DIR)
這條命令會(huì)啟動(dòng)一個(gè)React Native開發(fā)服務(wù)器俱恶，用于構(gòu)建我們的bundle文件。--root選項(xiàng)用來標(biāo)明你的React Native應(yīng)用所在的根目錄。在我們這里是ReactComponents目錄合是，里面有一個(gè)index.ios.js文件了罪。開發(fā)服務(wù)器啟動(dòng)后會(huì)打包出index.ios.bundle文件來，并可以通過http://localhost:8081/index.ios.bundle來訪問端仰。
在iOS 9以上的系統(tǒng)中捶惜，除非明確指明田藐，否則應(yīng)用無法通過http協(xié)議連接到localhost主機(jī)荔烧。可以參考這篇帖子了解一些解決方案汽久。
我們建議你在Info.plist文件中將localhost列為App Transport Security的例外：
NSAppTransportSecurityNSExceptionDomainslocalhostNSTemporaryExceptionAllowsInsecureHTTPLoads
如果不這樣做鹤竭，在嘗試通過http連接到服務(wù)器時(shí)，會(huì)遭遇這個(gè)錯(cuò)誤 -Could not connect to development server.
現(xiàn)在編譯和運(yùn)行你的應(yīng)用景醇。你應(yīng)該可以看到你的React Native應(yīng)用在ReactView內(nèi)運(yùn)行臀稚。
