** React-Native環境依賴node環境，如果還未安裝node 的朋友 可以先看上一篇文章**
Yarn、React Native的命令列工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模組的下載。React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務（packager）等任務。（此時node 6.9.2 npm 3.10.9）
npm install -g yarn react-native-cli
安裝完yarn後同理也要設定映象源：
yarn config set registry registry.npm.taobao.org --global
yarn config set disturl npm.taobao.org/dist --global
Android Studio安裝
下載地址：developer.android.google.cn/studio/inde… [React Native目前需要Android Studio2.0或更高版本。]
JDK8安裝，JAVA_HOME環境變數
Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令列中輸入 javac -version來檢視你當前安裝的JDK版本。如果版本不合要求，則可以到官網上下載。下載地址：
www.oracle.com/technetwork…
設定並檢查java環境變數JAVA_HOME，如C:\Program Files\Java\jdk1.8.0_121 [預設安裝位置]
Android SDK和模擬器
Android Studio包含了執行和測試React Native應用所需的Android SDK和模擬器。
除非特別註明，請不要改動安裝過程中的選項。比如Android Studio預設安裝了 Android Support Repository，而這也是React Native必須的（否則在react-native run-android時會報appcompat-v7包找不到的錯誤）。
確定所有安裝都勾選了，尤其是Android SDK和Android Device Emulator。
在初步安裝完成後，選擇Custom安裝項：
HAXM加速驅動
檢查已安裝的元件，尤其是模擬器和HAXM加速驅動。
開啟HAXM（Hardware Accelerated Execution Manager intel CPU硬體加速驅動）
參考資料：
software.intel.com/en-us/andro…
系統要求：
Intel cpu 支援Intel® VT-x 虛擬化
至少4G記憶體，推薦8G
作業系統：
Microsoft Windows* 10 (64-bit)
Microsoft Windows* 8 and 8.1 (64-bit)
Microsoft Windows* 7 (64-bit)
先在Bios配置開啟Intel Virtualization Technology, VT-x；大致過程如下，上網查詢自己機器的bios設定
下載Intel HAXM驅動
intelhaxm-android.exe
檢查
安裝完成後，在Android Studio的歡迎介面中選擇Configure | SDK Manager
點選ok進入下載頁面
ANDROID_HOME環境變數
確保ANDROID_HOME環境變數正確地指向了你安裝的Android SDK的路徑。
C:\Users\Administrator\AppData\Local\Android\sdk [預設位置]
開啟控制皮膚 -> 系統和安全 -> 系統 -> 高階系統設定 -> 高階 -> 環境變數 -> 新建
設定path
你需要關閉現有的命令符提示視窗然後重新開啟，這樣新的環境變數才能生效。
新建一個AS（Android Studio）工程
建立一個模擬器，AVD(Android Virtual Device)
建立React-Native工程
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
程式碼分析
AppRegistry
AppRegistry是JS執行所有React-Native應用的入口。應用的根元件應當通過
AppRegistry.registerComponent方法註冊自己，然後原生系統才可以載入應用的程式碼包並且在啟動完成之後通過呼叫AppRegistry.runApplication來真正執行應用。
AppRegistry應當在require序列中儘可能早的被require到，以確保JS執行環境在其它模組之前被準備好。
registerComponent(appKey: string, getComponentFunc: ComponentProvider)
StyleSheet
StyleSheet提供了一種類似CSS樣式表的抽象。
引入StyleSheet的原因：
從程式碼質量角度：
** 從render函式中移除具體的樣式內容，可以使程式碼更清晰易懂。** ** 給樣式命名也是對render函式中的原始元件的作用的一種標記。**
從效能角度：
建立一個樣式表，就可以使得我們後續更容易通過ID來引用樣式，而不是每次都建立一個新的物件。
它還使得樣式只會在JavaScript和原生之間傳遞一次，隨後的過程都可以只傳遞一個ID（這個優化還未實現）
View
作為建立UI時最基礎的元件，View是一個支援Flexbox佈局、樣式、一些觸控處理、和一些無障礙功能的容器，並且它可以放到其它的檢視裡，也可以有任意多個任意型別的子檢視。不論在什麼平臺上，View都會直接對應一個平臺的原生檢視，無論它是UIView、
還是android.view.View。下面的例子建立了一個View，包含了兩個有顏色的方塊和一個自定義的元件，並且設定了一個內邊距：
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<MyCustomComponent {...customProps} />
</View>
複製程式碼View的設計初衷是和StyleSheet搭配使用，這樣可以使程式碼更清晰並且獲得更高的效能。儘管內聯樣式也同樣可以使用。
Text
一個用於顯示文字的React元件，並且它也支援巢狀、樣式，以及觸控處理。在下面的例子裡，巢狀的標題和正文文字會繼承來自styles.baseText的fontFamily字型樣式，不過標題上還附加了它自己額外的樣式。標題和文字會在頂部依次堆疊，並且被程式碼中內嵌的換行符分隔開。
元素在佈局上不同於其它元件：在Text內部的元素不再使用flexbox佈局，而是採用文字佈局。這意味著內部的元素不再是一個個矩形，而可能會在行末進行摺疊。
樣式的繼承
React Native實際上還是有一部分樣式繼承的實現，不過僅限於文字標籤的子樹。在下面的程式碼裡，第二部分會在加粗的同時又顯示為紅色：
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
複製程式碼我們相信這種看起來不太舒服的給文字新增樣式的方法反而會幫助我們生產更好的App：
(對開發者來說) React元件在概念上被設計為強隔離性的：你應當可以在應用的任何位置放置一個元件，而且只要屬性相同，其外觀和表現都將完全相同。文字如果能夠繼承外面的樣式屬性，將會打破這種隔離性。
(對實現者來說) React Native的實現也被簡化了。我們不需要在每個元素上都新增一個fontFamily欄位，並且我們也不需要隱含地在顯示文字的時候向上遍歷樹。唯一的樣式繼承在原生Text元件中編碼，也不會影響到其它元件或者系統本身。
Dimensions
本模組用於獲取裝置螢幕的寬高。
例子：var {height, width} = Dimensions.get('window');
@param {string} dim 想要獲取的尺寸資訊的欄位名。
@returns {Object?} 返回的尺寸資訊值。
Image
一個用於顯示多種不同型別圖片的React元件，包括網路圖片、靜態資源、臨時的本地圖片、以及本地磁碟上的圖片（如相簿）等。
用法樣例：
renderImages() {
return (
<View>
<Image
style={styles.icon}
source={require('./icon.png')}
/>
<Image
style={styles.logo}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
</View>
);
}
複製程式碼