上個月全身心的投入研究了微信小程式，也完整的做了自認為還可以的專案，感覺很有樂趣,也學習到很多前端的一些知識。這個月開始研究ReactNative，說起ReactNative，大家應該都不會陌生，它的口號是`Learn once, write anywhere`，特點就是使用JavaScript 和React構建我們的應用，是一個真實的App(和web App和HTML有本質區別)，不需要重新編譯，可以使用原生程式碼，對企業來說，最重要的點就是跨平臺，一套程式碼可以在Android和iOS終端都能執行，這大大節約了開發成本並且能有效的縮短開發週期。總結幾個詞就是

跨平臺
低投入高回報
效能高
支援自動更新

這篇文章主要內容

windows平臺環境搭建
常用ReactNative命令
建立自己的專案HelloReact
官方demo的執行及原始碼閱讀

若已掌握上面知識點，即可關閉此文章，以免浪費時間，此文章無技術含量，只做筆記使用，謹慎閱讀。
（學習的記錄程式碼提交到GitHub，可點選查閱,是按照官方demo，並根據自己的學習理解而成）

node.js

ReactNative是基於node.js的，要想執行我們ReactNative應用，就需要安裝node.js搭建本地伺服器，node.js的安裝相對簡單，官網下載地址https://nodejs.org/en/download/根據自己的平臺下載對對應的安裝包，Windows平臺選擇msi檔案，下載之後根據提示安裝即可，然後通過開啟cmd通過命令node -v檢視是否安裝成功，如果執行命令後顯示出版本號則安裝成功。

安裝Android SDK

對於Android開發者，都已經安裝有sdk，如果是你之前沒有開發過Andoid，那麼就需要安裝java和android sdk了，對於java就不在說了，網上很多資料，android可以去官方網站下載Androidstudio,然後下載對應版本sdK,如果沒有不想安裝Androidstudio軟體，可以直接安裝sdk，也是通過此官網。下載安裝後配置環境.通過計算機–>高階系統設定–>環境變數，新建變數變數名ANDROID_HOME，變數值為sdk目錄，如D:Androidsdk，選擇path變數，點選編輯，在變數值最後追加（不能覆蓋）%ANDROID_HOME% ools;%ANDROID_HOME%platform-tools。
建立專案時預設Android SDK version 23 ,SDK build tools version 23.0.1 ,Android Support Repository >= 17 (for Android Support Library),所以你要選擇安裝上面版本sdk.

安裝ReactNative

ReactNative原始碼在GitHub上託管，如果你安裝了git，則在命令列輸入下面命令檢出專案

git clone https://github.com/facebook/react-native.git複製程式碼

如果沒有安裝git，可以在GitHub上點選clone or download，然後選擇Download ZIP，下載成功解壓就可以了。

安裝命令列

開啟cmd，進入react-native目錄

cd react-native複製程式碼

然後通過命令安裝react命令

npm install -g react-native-cli複製程式碼

執行這個命令較慢，下載速度一般都是十幾k，可以使用映象地址registry.npm.taobao.org ，或者科學上網。安裝成功之後react的命令就可以使用了。
常用命令

//幫助
react-native -h

//檢視ReactNative版本
react-native --version  

//升級
npm update -g react-native-cli

//檢視本地ReactNaitve 版本資訊
npm info react-native

//工程下載安裝RN環境,根據配置檔案package.json
npm install 

//初始化一個工程、並下載原始碼和依賴包（時間較慢）
react-native init   專案名稱

//執行Android專案
react-native run-android

//執行iOS專案
react-native run-ios

//根據package.json配置的RN版本,更新RN環境程式碼
react-native upgrade                     

//專案降級或升級到指定版本,記得react-native upgrade更新一下專案依賴等
npm install --save react-native@0.46     

//在android目錄下操作打包
gradlew assembleRelease複製程式碼

建立自己的ReactNative專案

react-native init HelloNative複製程式碼

稍等一會後，命令列出現下面提示就表示專案初始化成功了，

To run your app on iOS:
   cd F:HelloNative
   react-native run-ios
   - or -
   Open iosHelloNative.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd F:HelloNative
   Have an Android emulator running (quickest way to get started), or a device c
onnected
   react-native run-android複製程式碼

上面主要提示你執行專案的操作命令，通過cd 命令，也將操作目錄切換到專案目錄，如果想執行到iOS平臺就可以執行命令react-native run-ios，或者使用Mac匯入到Xcode中點選執行按鈕，

如果要執行在Android平臺上則在專案中執行命令react-native run-android,也可以使用AS。當然本人是搞Android開發的，就執行Android了，當然前提你要安裝有模擬器，或者通過usb連線電腦，並將手機和電腦連到一個區域網中，設定ip和埠，埠號是8081。然後執行命令react-native run-android，執行命令後會自動開啟node服務，預設埠是8081.然後會自動安裝到模擬器或者手機上。你可以去專案下路徑androidappuildoutputsapk檢視安裝包。下面是建立的預設專案.現在大工告成。

如何修改專案呢，可以通過sumlime開啟檔案，在此我使用了webStorm開啟專案，目錄結構圖如下

test是測試目錄，android和ios分別對應平臺程式碼，node_mmodules是專案依賴。package.json是一些版本配置資訊。index.android.js和index.ios.js就是對應平臺的入口了。

import React, { Component } from `react`;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from `react-native`;

export default class HelloNative extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{`
`}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: `center`,
    alignItems: `center`,
    backgroundColor: `#F5FCFF`,
  },
  welcome: {
    fontSize: 20,
    textAlign: `center`,
    margin: 10,
  },
  instructions: {
    textAlign: `center`,
    color: `#333333`,
    marginBottom: 5,
  },
});

AppRegistry.registerComponent(`HelloNative`, () => HelloNative);複製程式碼

上面是es6的語法，import就是匯入一些元件等資訊，export defaul是將元件匯出，暴露出來，供外部呼叫，對於RN來說是元件化開發，所以介面需要繼承Component，並重寫render方法，對於樣式可以通過StyleSheet.create({}）統一管理。我們修改下render方法顯示我們想要顯示的內容，如下

 render() {
    return (
      <View style={styles.container}>
       <Text>Hello,我是第一次接觸ReactNative</Text>
      </View>
    );
  }複製程式碼

編輯儲存後，點選模擬器選單鍵彈出

然後選擇reload就可以載入到更改後的內容了，不需要重新打包安裝。圖中你最常用的就是reload，第二個是除錯用的，點選後會在瀏覽器顯示除錯頁面，按F12就可以展示控制檯的一些輸出資訊。第三個和第四個是動態載入和熱更新載入。開啟動態載入後，我們每次儲存後就自動載入最新的內容，不需要在點選reload按鈕了。注意使用真機除錯搖一搖手機就出現這個按鈕頁面。

執行官網demo

到現在我們已經可以執行專案，並簡單的更改專案了，那麼對於剛開始入門的該怎麼學習呢。我認為最好的資料就是官方文件以及官方提供的例子，文件就不用說了，直接去官方就能看到，那麼主要介紹一下如何將官方的demo執行到手機上，下面以android為例，除了前面介紹的需要安裝的，還需要安裝ndk，下載連結如下

Mac OS (64-bit) – dl.google.com/android/rep…
Linux (64-bit) – dl.google.com/android/rep…
Windows (64-bit) – dl.google.com/android/rep…
Windows (32-bit) – dl.google.com/android/rep…

安裝後配置環境變數，新建變數名ANDROID_NDK，變數值為安裝目錄。設定好之後進入文章開始檢出的react-native專案,然後按如下操作

進入專案目錄
```
cd react-native複製程式碼
```
安裝依賴包
```
npm intstall複製程式碼
```

打包

gradlew :RNTester:android:app:installDebug複製程式碼

進入指令碼目錄
```
cd  scripts複製程式碼
```
啟動包管理器
```
packager.sh複製程式碼
```
需要注意的是，官網提供打包命令./gradlew :RNTester:android:app:installDebug和指令碼啟動命令./scripts/packager.sh,在windows上不能執行。按上面操作即可。同樣，執行打包後會自動安裝，也可以到react-nativeRNTesterandroidappuildoutputsapk目錄找到安裝包安裝到手機或者模擬器。

執行的效果圖如上，該demo中包含了所有元件的使用方法已經屬性介紹，還介紹了api的使用，是不可多得的好材料，也是學習最可靠的材料。
至於閱讀原始碼，我們至於從入口找即可，去android目錄下檢視原始碼，找到RNTesterApplication這個，他繼承了Application 並且實現了ReactApplication，在該Application中有一個實現如下,它指定了js載入的入口，然後，去到該目錄找到該檔案即可。

 @Override
    public String getJSMainModuleName() {
      return "RNTester/js/RNTesterApp.android";
    }複製程式碼

好了，文章就介紹到這裡。如果你感覺官網的demo太複雜或者執行復雜，可以檢出我的學習記錄的專案連結地址,共同學習。
如有錯誤，請指正，本人新手，謝謝。

ReactNative初體驗