React-Native環境搭建(windows)

** 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

在SDK Platforms窗口中，選擇Show Package Details，而後在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 2三、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

在SDK Tools窗口中，選擇Show Package Details，而後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須是這個版本）。而後還要勾選最底部的Android Support Repository.

點擊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>
  );
}
複製代碼

默認狀況下Android是不支持GIF和WebP格式的。你須要在android/app/build.gradle文件中根據須要進行配置。

resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')

決定當組件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。

cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器視圖的尺寸（若是容器有padding內襯的話，則相應減去）。譯註：這樣圖片徹底覆蓋甚至超出容器，容器中不留任何空白。

contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器視圖的尺寸（若是容器有padding內襯的話，則相應減去）。譯註：這樣圖片徹底被包裹在容器中，容器中可能留有空白

stretch: 拉伸圖片且不維持寬高比，直到寬高都恰好填滿容器。

repeat: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。

center: 居中不拉伸。

source {uri: string}, number

uri是一個表示圖片的資源標識的字符串，它能夠是一個http地址或是一個本地文件路徑（使用require(相對路徑)來引用）。

static prefetch(url: string)

預加載一個遠程圖片(將其下載到本地磁盤緩存)。