React native 基本開發指南
1.項目，組件（Component）的基本結構
2.Component的生命週期
3.界面佈局
4.基本網絡請求Fetch
5.第三方庫的使用
6.基本數據存儲方式
7.如何使用原生UI控件（Android）
8.與原生項目交互的四種方式（Android）
項目地址：點這裏
1.導出項目
2.在項目根目錄輸入npm install命令
3.輸入react-native run-android 在android設備上運行
後續會繼續完善包括：
1.如何打包，
2.如何進行熱更新
3.性能問題
4.使用FISH框架
5.開發一個完整的項目
在RN世界裏，Component（組件）相當於一個UI控件，APP就是由各種Component組合在一起顯示出來的。一開始我對這句話不是很理解，但是隨着我對RN的一步步瞭解，對這句話的體會也越深刻。
前提：瞭解JS，Html，CSS
可以閱讀把阮一峯老師的《 ECMAScript 6 入門》這篇關於ES6的文檔
其中關於Promise對象，Async函數等都比較重要，像網絡請求，數據存儲都需要用到異步操作。
一、項目結構
新建一個RN項目，目錄大致如下：
（1）package.json：項目基本信息還有依賴的第三方庫的信息
（2）index.js，主要用來註冊啓動組件，即應用打開後的第一個界面
（3）android，ios文件夾，自動生成對應平臺的代碼
（4）node_modules導入的依賴庫文件
二、component（組件）的基本結構
（1）組件導入區：所有使用的組件都必須先導入，否則會直接報錯。
（2）組件具體展示：render方法返回具體的顯示界面
（3）組件樣式：自定義樣式
運行結果如下：
還有一些RN比較重要的概念
Props（屬性）：在組件使用時調用，組件生命週期中不可改變。
這裏以Text舉例，Text組件擁有width和height屬性，父組件在使用時可以爲Text的屬性進行賦值。這裏RN可以自定義組件，設置一些屬性提供給父組件調用。
運行結果如下：
State（狀態）：組件生命中可以改變，常用來動態展示數據，
通過this.setState方法改變state值從而使組件重新加載，一般在組件的構造函數中進行初始化。
運行結果如下：
三、component（組件）的生命週期
當應用啓動，React Native在內存中維護着一個虛擬DOM，組件的生命週期就是指組件初始化並掛載到虛擬DOM爲起始，到組件從虛擬DOM卸載爲終結。生命週期的方法就是組件在虛擬DOM中不同狀態的描述。
從上圖所示，組件的生命週期分爲三個階段，分別是掛載（mounting）、更新（updating）和卸載（Unmounting），其中掛載和更新階段都會調用rander方法進行繪製。下面對這三個階段分別進行講解。
1、掛載
掛載指的是組件的實例被創建並插入到DOM中，掛載會調用如下方法。
（1）constructor
constructor是RN組件的構造方法，它在RN組件被加載前先被調用。當我們的組件繼承自React.Component時，需要在構造方法中最先調用super(props)。如果不需要初始化state，則不需要實現構造方法。
在構造方法中初始化state，如下所示。
（2）componentWillMount
componentWillMount方法在掛載前被立即調用。它在render方法前被執行，因此，在componentWillMount方法中設置state並不會導致重新被渲染。它只會被執行一次，通常情況下，建議使用constructor方法來代替它。
（3）render
該方法是必須的，一旦調用，則會去檢查 this.props 和 this.state 的數據並返回一個 React 元素。render方法中不應該修改組件的props和state，因爲render方法是“純潔的”，這意味着每次調用該方法時都會返回相同的結果。render方法在更新階段也會被調用，前提是shouldComponentUpdate方法返回true。
同時，每次調用this.setState方法之後都會重新調用render方法對組件進行重新加載。
（4）componentDidMount
componentDidMount方法在組件被掛載後立即調用，在render方法後被執行。開發者可以在這個方法中獲取其中的元素或者子組件，需要注意的是，子組件的componentDidMount方法會在父組件的componentDidMount方法之前調用。如果需要從網絡加載數據顯示到界面上，在這裏進行網絡請求是一個不錯的選擇。在componentDidMount方法中設置state將會被重新渲染。
2、更新
改變props或者state時可以導致更新，當一個組件被重新渲染時，會調用如下方法。
（1）componentWillReceiveProps
componentWillReceiveProps方法會在掛載的組件接收到新的props時被調用，它接收一個Object類型參數nextProps，表示新的props。通常在這個方法中接收新的props值，並根據props的變化，通過調用 this.setState() 來更新組件state，this.setState()不會觸發 render方法的調用。
在掛載的過程中，初始的props並不會觸發調用componentWillReceiveProps方法，這個方法只會在組件中的props更新時被調用，另外，調用this.setState()也不會觸發調用componentWillReceiveProps方法。
（2）shouldComponentUpdate
當組件接收到新的props和state時，shouldComponentUpdate方法被調用，它接收兩個Object參數，nextProps是新的props，nextState是新的state。
shouldComponentUpdate方法默認返回true，用來保證數據變化時，組件能夠重新渲染。你也可以重載這個方法，通過檢查變化前後props和state，來決定組件是否需要重新渲染。如果返回false，則組件不會被重新渲染，也不會調用本方法後面的componentWillUpdate和componentDidUpdate方法。
（3）componentWillUpdate
如果組件props或者state改變，並且此前的shouldComponentUpdate方法返回爲 true，則會調用該方法。componentWillUpdate方法會在組件重新渲染前被調用，因此，可以在這個方法中爲重新渲染做一些準備工作。需要注意的是，在這個方法中，不能使用 this.setState 來更改state，如果想要根據props來更改state，需要在componentWillReceiveProps方法中去實現，而不是在這裏。
（4）componentDidUpdate
組件重新渲染完成後會調用componentDidUpdate方法。兩個參數分別是渲染前的props和渲染前的state。這個方法也適合寫網絡請求，比如可以將當前的props和prevProps進行對比，發生變化則請求網絡。
3、卸載
卸載就是從DOM中刪除組件，會調用如下方法。
（1）componentWillUnmount()
componentWillUnmount方法在組件卸載和銷燬之前被立即調用。可以在這個方法中執行必要的清理工作，比如，關掉計時器、取消網絡請求、清除組件裝載中創建的DOM元素等等。
四、界面佈局
界面佈局是很重要的一個環節，畢竟一個應用要長得“好看”才能留下更多的用戶，這裏React Native已經提供了很多基本組件，可以在React Native中文網的文檔中查看。還有GitHub中也有人開發第三方組件庫，包括FISH-X組件庫都很大程度上方便了我們對佈局的使用，之後也會介紹如何導入第三方庫。
關於佈局這塊內容，我本身也在學習，這裏提供幾個關於前端佈局的基礎使用。
《Flex 佈局教程：語法篇》——阮一峯
《Flex 佈局教程：實例篇》——阮一峯
《React-Native 的基本控件屬性方法》——冬瓜小生
五、基本網絡請求Fetch
在使用前可以先了解一些基本概念：
爲什麼使用 Fetch《傳統 Ajax 已死，Fetch 永生》——Cam
《使用 Fetch 先了解一下 Promise 概念》——來自 MDN 社區
《React Native網絡請求及 UI 展示》——王方帥
基本使用：
注意：初始數據的獲取一般在componentDidMount這個方法中進行
運行結果：
六、第三方庫的使用
RN擁有很多優秀的第三方庫，使用一些成熟的輪子能讓我們更快的搭建出一個常用app的框架。
第三方庫的使用簡單來說只有兩步：
（1）導入第三方庫：在工程目錄下輸入命令：npm install [第三方庫] –save
導入成功後，packge.json文件裏面會有對應第三方庫的信息
（2）按照描述使用第三方庫，以下是幾個基本例子
react-native-tab-navigator (使用較簡單) 更適合作爲底部的 tab，使用方式也超級簡單
react-native-swiper，banner類
react-native-scrollable-tab-view (star 最多的 tab 類控件) 更適合作爲頂部的 tab，類似今日頭條中的效果
還有FISH-X組件庫的集成，之前文檔中已經介紹，這裏就不重複描述了。
七、RN的數據存儲
RN使用AsyncStorage將數據存儲到本地，AsyncStorage是一個基於key-value鍵值對的異步持久化存儲系統，對於應用來說其存儲的內容全局生效。如果有開發過Andorid的人來說AsyncStorage和Sharedpreferences是十分類似的。
這裏提供官網的介紹和使用教程
AsyncStorage使用異步Promise模式存儲數據，例如調用存儲方法存儲一個字符串setItem(‘I_AM_KEY’,’i_am_value’)，setItem會異步執行，等setItem執行完成後會返回一個Promise對象。這裏強烈建議先了解Promise，async等基本概念，在本篇文章的最開始就給出了參考教程。
基本使用：
操作步驟：
（1）setItem
（2）getItem
（3）moveItem
（4）getItem
當然數據存儲不止AsyncStorage一種，也可以使用sqlite，可以參考react-native-sqlite。（由於還沒嘗試所以暫時沒有記錄）
甚至可以用RN調用原生的方法進行存儲，這裏之後會介紹如何與原生進行交互。
八、使用原生UI組件
比如在Android自定義了一個控件想顯示在RN的界面上，這個是可以實現的。RN提供了調用原生UI組件的方法，令佈局的使用更加的靈活。
這裏以封裝Android原生控件爲例
Android端：
（1）自定義一個View，或者直接使用Android原生的控件
（2）創建一個ViewManager：
getName方法：返回組件的名字提供給RN進行調用
createViewInstance方法：返回自定義的View
@ReactProp註解：提供給RN設置的屬性
要導出給JavaScript使用的屬性，需要申明帶有@ReactProp（或@ReactPropGroup）註解的設置方法。方法的第一個參數是要修改屬性的視圖實例，第二個參數是要設置的屬性值。方法的返回值類型必須爲void，而且訪問控制必須被聲明爲public。JavaScript所得知的屬性類型會由該方法第二個參數的類型來自動決定。支持的類型有：boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap。@ReactProp註解必須包含一個字符串類型的參數name。這個參數指定了對應屬性在JavaScript端的名字。除了name，@ReactProp註解還接受這些可選的參數：defaultBoolean, defaultInt, defaultFloat。
（3）創建一個ReactPackage
createViewManagers：返回自定義ViewManager的集合
createNativeModules：返回自定義NativeModule的集合（這個之後將通信的時候會用到）
（4）在Application中對我們創建的ReactPackage進行注入
如果本身是RN直接生成的Android代碼，則已經有了這個Application，如果是Android導入RN就需要自己進行添加
RN端：
（1）實現js模塊調用requireNativeComponent方法
（2）在JS中使用原生的View
運行結果如下：
九、RN與原生進行通信
RN與原生App之間的通信有四種方法，接下來讓我們一一來了解這些
（1）RCTDeviceEventEmitter 事件方式
（2）Callback 回調方式
（3）Promise
（4）直傳常量數據（原生向RN）
四種方式各具不同優缺點
1. RCTDeviceEventEmitter
優點：可任意時刻傳遞，Native主導控制。
2. Callback
優點：JS調用，Native返回。
缺點：CallBack爲異步操作，返回時機不確定
3. Promise
優點：JS調用，Native返回。
缺點：每次使用需要JS調用一次
4. 直傳常量數據
優點：調用簡單
確定：只能RN調用原生
前三種的方法大致的實現步驟如下：
（1）定義Module類，繼承ReactContextBaseJavaModule
在Module類中，我們定義交互的方法，例如RN調用Native的方法，Native調用RN的方法等。
（2）定義Package類，繼承ReactPackage
實現Package的createNativeModules方法，將Module實例添加到集合。
（3）定義Application，繼承ReactApplication
實現getPackages方法，將Package實例添加到getPackages下的集合。
最後一種方法跨域傳值，只能從原生端向RN端傳遞。RN端可通過 NativeModules.[module名].[參數名] 的方式獲取
接下來直接上代碼
1. RCTDeviceEventEmitter
Android代碼：
創建ReactContextBaseJavaModule
定義Package類，繼承ReactPackage
定義Application，這個和第八點的做法一樣
RN代碼：
使用DeviceEventEmitter添加監聽事件，提供原生調用
使用NativeModules.commModule調用原生方法，名字一定要一致
運行結果如下
2. Callback
和上面的差別在於，調用原生方法的同時會傳入一個Callback方法進行回調
android代碼：
增加調用方法，其他都不需要處理
RN代碼：
在調用方法的時候傳入Callback進行回調，其他不變
運行結果：
3. Promise
Promise和RN十分類似，只不過將Callback換成了Promise
android代碼：
RN代碼：
運行結果：
4. 直傳常量數據
RN直接調用原生的數據，寫法很簡單
Android端直接調用getConstants方法
RN使用NativeModules.commModule.Constant獲取原生代碼中定義的常量
運行結果：
上面的所有代碼我都上傳到GitHub上了，地址點這裏
下載成功後，命令行運行npm install下載modules
react-native run-android直接運行在安卓設備上