一、React Native Android Win7開發環境配置
React Native可以讓你使用Javascript開發出具有原生效果的移動應用，在多個平臺中可以高度複用相關業務模組，提高多平臺的開發效率，值得學習研究。
Learn once, write anywhere
1.使用軟體：
搭建React Native Android開發環境需要以下軟體：
Android Sdk、Android Statio、Jdk、Nodejs、Android Ndk(可選)、Git（可選） 軟體到官方網站下載最新版本即可，其中可選下載是對React Native原始碼環境部署才會用到，相關網站如下：
Android官方網站：developer.android.com/develop/ind…
Jdk官方網站：
Nodejs官方網站：nodejs.org/en/
Git官方網站：git-scm.com/download/wi…
2.環境變數配置：
2.1.Java環境變數配置
Jdk以全部預設選擇進行安裝，待安裝完成以後按以下步驟操作
- 2.1.1 右擊【我的電腦】--->【屬性】----->【高階】--->【環境變數】
- 2.1.2 新建系統變數，建立變數名為JAVA_HOME，變數值為jdk安裝目錄
- 2.1.3 新建系統變數，建立變數名為CLASSPATH，變數值為【.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;】
- 2.1.4 修改Path系統變數值，將【%JAVA_HOME%\bin;】加入到變數值最前面部分
- 2.1.5 驗證jdk是否配置成功，在DOS命令視窗輸入【java -version 】
2.2.Android Sdk環境變數配置
新建系統變數，建立變數名為ANDROID_HOME,變數值為Android Sdk安裝目錄 修改Path系統變數值，將【%ANDROID_HOME%;】加入到變數值最前部分
2.3.Android Ndk環境變數配置
新建系統變數，建立變數名為ANDROID_HOME,變數值為Android Ndk安裝目錄 修改Path系統變數值，將【%ANDROID_NDK%;】加入到變數值最前部分
上面相關操作完成以後，需要根據你自己的網路環境決定是否需要配置相關代理。
設定公司npm代理
npm config set registry =
npm config set proxy=
給gradle設定代理，gradle.properties檔案中設定如下
systemProp.http.proxyHost= systemProp.http.proxyPort= systemProp.https.proxyHost= systemProp.https.proxyPort=
設定Android SDK代理
設定gradlew offline工作
3.執行起第一個官方的專案：
npm install -g react-native-cli
react-native init AwesomeProject
在react-native init使用此命令時如果不能建立成功，可以把網路切換到Tencent-StaffWiFi環境下，再使用此命令
在AwesomeProject 中會包含以下內容如圖所示：
cd AwesomeProject ，然後shift+滑鼠郵件，選擇在此處開啟命令視窗
react-native start
我們使用Android Statio開啟檔案中的android專案
執行android專案，
搖動手機或按下選單按鈕撥出選單，然後點選 【DeviceID Settings】 選單項進入應用的選項介面，再點選 【Debug server host for device】 選項，填入你的主機的 ip 和埠號 ，格式為：XXX.XXX.XXX.XXX:XXXX 在這裡的網路環境，如果不行可以將本地網路斷開，然後開啟WIFI熱點，手機連上wifi熱點，那麼reload js就可以成功了。
開啟index.android.js，內容如下，我可以從這裡開始寫React程式碼，寫完都不用重新打包APK，reload js應用就可以更新
二、ReactNative UIExplorer 應用分析
官方給出UIExplorer 應用展示目前全部的UI和功能元件，通過該應用原始碼可以看出React Native的使用，通過讀原始碼會發現裡面會使用一些ES6和ES7的新特性，所以在分析之前必須得去了解ES6和ES7的語法。
上圖是根據原始碼分析畫出圖，通過此圖我們可以瞭解到該應用的全域性構成，UIExplorerList管理了全部的UI和功能元件，通過UIExplorerListBase中的ListView的onpress方法切換不同功能組建，createExamplePage會渲染出所選擇的UI及功能組建檢視，在下圖中去掉了TextExample中對UIExplorerBlock和UIExplorerPage的使用關係，因為例子中的使用關係我們可以通過export方式來實現。
UIExplorerApp 是應用的入口，整個專案的啟動的檔案。
他會render出DrawerLayoutAndroid，抽屜（通常用於導航切換）是通過renderNavigationView方法渲染的，並且DrawerLayoutAndroid的直接子檢視會成為主檢視（用於放置你的內容）。
renderNavigationView此方法用於渲染一個可以從螢幕一邊拖入的導航檢視。
getInitialState 獲得初始化元件狀態，只呼叫一次
componentWillMount：元件將要載入，只呼叫一次
componentDidMount 元件載入完成並顯示出來了，也就是完成了一次繪製，只呼叫一次
render：繪製元件，可能呼叫多次。
在React的工作流程中，setState會觸發一次重繪
class UIExplorerList extends React.Component 這是ES6的新語法實現繼承
這個類requrie應用的全部UI組建和功能，並注入到封裝的UIExplorerListBase類中，作為ListView的datasource
並通過UIExplorerListBase.makeRenderable(example)方法切換到對應的UI組建或者功能介面
UIExplorerListBase通過ListView渲染了主頁面的帶有搜尋的介面，並且當事件中呼叫了makeRenderable方法會example.examples ? createExamplePage(null, example) : example。 createExamplePage會渲染出UI元件或者功能頁面，createExamplePage分別由UIExplorerBlock和UIExplorerPage組成 UIExplorerPage中使用了ES6的特性 import type { Example, ExampleModule } from 'ExampleTypes'; UIExplorerPage中使用了ES7的特性 物件的擴充套件運算Object Spread: var extended = { ...obj, a: 10 };
按照UIExplorer的結構，UI組建和功能有兩種開發方式，一種require UIExplorerBlock，UIExplorerPage兩個類，另一種直接export
GeolocationExample分析： 獲取地理位置新這裡是使用的html5標準中的navigator.geolocation中的方法來進行的。 定義模組資訊
暴露元件資訊
組建佈局渲染
三、ReactNative 元件生命週期
ReactNative Android元件是擁有生命週期的，整個生命週期如下圖所示：
getDefaultProps() 在組建類建立的時候呼叫一次，然後返回值被快取下來。 該方法在任何例項建立之前呼叫，並且返回物件將會在例項間共享。
getInitialState() 在元件掛載之前呼叫一次，返回將作為this.state的初始值
componentWillMount() 在初始化渲染執行之前立即呼叫一次，如果該方法內呼叫setState，render將會更新state。
render() 該方法是必須的，當呼叫該方法時會檢測this.props和this.state，返回一個單子元件，該元件可以是虛擬本地化dom元件也可以是複合元件。 如果返回null或者false表明不需要渲染任何東西。 render()函式內不應該修改元件的state，每次呼叫都返回相同的結果，不讀寫DOM資訊，不和瀏覽器互動，這些操作可以放入在其他生命週期回撥函式中執行。
componentDidMount() 在初始化渲染執行之後立即呼叫，這時組建已經擁有一個DOM展現，可以通過this.getDOMNode()來獲取相應DOM節點。
componentWillReceiveProps() 在組建接收到新的props的時候呼叫，初始化渲染的時候該方法不會被呼叫。
shouldComponentUpdate() 在接收到新的 props 或者 state，將要渲染之前呼叫。該方法在初始化渲染的時候不會呼叫，在使用 forceUpdate 方法的時候也不會。 如果確定新的 props 和 state 不會導致元件更新，則此處應該 返回 false。
componentWillUpdate() 在接收到新的props或者state之前立即呼叫，在初始化渲染的時候該方法不會被呼叫，使用該方法做一些更新之前的準備工作。
componentWillUnmount() 在組建從DOM中移除的時候立即被呼叫。
瞭解上述生命週期的過程以後，再結合UIExplorer應用看看Android ReactNative的生命週期過程是怎樣的，整個UIExplorer應用什麼週期過程會分為開啟進入應用，點選Image進入ImageExample頁面，再按back建返回主介面。 初次開啟UIExplorer應用，縱觀整個過程我們發現涉及到的相關類有UIExplorerApp、UIExplorerList、UIExplorerListBase、UIExplorerPage。
進入ImageExample，縱觀整個過程我們發現涉及到的相關類有UIExplorerApp、UIExplorerList、UIExplorerListBase、createExamplePage、ImageExample、UIExplorerPage。
待研究 應用耗電量 元件掛載後記憶體變化 Native和JS部分拆分
參考網址：