React Native的嘗試
前言：
前端跨平臺一直是我感興趣的地方，有三個前端想了解，一個是web前端用vue+elementUI；一個是手機前端用vue+uniapp；一個是小程序；桌面前端暫時不涉及。
目前看看RN觸類旁通；以《大前端入門指南》作爲參考。
內容有：RN介紹、RN使用、RN實戰。
RN介紹
RN是使用JavaScript和React框架跨平臺開發原生應用的開源技術框架。設計理念是即擁有Native的用戶體驗，又保留React框架的開發效率。
React
React是Facebook在2013年開源出的JavaScript庫，用於創建可複用、可聚合web組件。React把界面分爲一個個組件，通過對這些組件的嵌套、組合得到可交互的複雜界面。具有以下三個特點：
- 組件化。通過對這些組件的嵌套、組合得到可交互的複雜界面。
- 聲明式設計。採用JSX語法聲明視圖。
- 單向數據流。數據發生變化時，直接渲染整個UI。
JSX語法
JSX是JavaScript語法的擴展，是React用來描述UI組件的語法。JSX可以定義React得到屬性和元素。JSX可以使用JavaScript表達式，基本用法與HTML類似，使用成對的標籤或直接寫入數據。如
const root=<div><h1>hello</h1></div>
ReactDOM.render(root,document.getElementById("root"));
組件
組件是react的核心，組件將UI劃分爲一些獨立、可複用的模塊。
react的組件通過使用ES6 class即類組件的方式定義組件。class定義組件需要class繼承Reac.Component，並且class內部必須定義render方法，render方法返回代表該組件UI的reader元素。定義組件後，使用ES6 export將模塊作爲默認模塊導出，這樣在其他JavaScript文件中使用導入的模塊。
state是組件的內部狀態，當state改變時相應的UI會重新渲染。使用時通過this.state在constructor構造方法中進行初始化，狀態改變時通過this.setState方法改變狀態。
props和方法參數類似，是react組件間聯繫的機制，用於把父組件中的數據或方法傳遞給子組件，供子組件使用。即父組件通過屬性的形式向子組件傳遞參數，子組件通過props接收父組件傳遞過來的參數。
組件的生命週期
RN中的組件和Android的activity類似，同樣有生命週期，理解生命週期是合理開發的關鍵。
constructor是RN組件的構造方法，在RN組件被加載前調用，且只調用一次，使用時需要在構造方法中先調用super（props），主要對組件的一些狀態進行初始化。這個好眼熟，昨天我寫設計模式筆記的時候，還有一種constructor模式。
componentEillMount該函數在初始渲染（render函數被調用）前被調用，且只調用一次。主要進行一些業務初始化操作和設置組件狀態。
render是組件的渲染函數，返回JSX或其他組件，用於開始渲染並生成虛擬DOM。在該函數中，只能通過this.state和this.props來訪問之前在函數中初始化的數值。
componentDidMount在初始渲染後被調用，且只調用一次。由於UI已經成功渲染，而且是異步的，所有這個函數中進行數據的請求等複雜的操作，不會出現UI錯誤。
componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate顧名思義。
componentWillUNmount在RN組件被卸載前被調用。主要用於清理一些無用內容，如釋放資源、取消訂閱、取消計時器和網絡請求等。
RN使用
這一章講開發環境、常用UI組件、網絡、導航器、數據存儲、原生模塊開發六部分內容。
開發環境
搭建React環境。需要先按照node.js和npm。我使用過vue，所以這一部分觸類旁通，這裏就不多贅述。
windows平臺下RN的環境搭建。雖然說Mac系統下安裝RN會更好一些（Windows不能進行iOS平臺測試），但是我電腦是Windows操作系統。在RN環境搭建前需要在Windows平臺安裝好Java和Android SDK以及配置好Android開發所需的環境變量。之後安裝軟件包管理器 Chocolatey，然後安裝node.js、Python2，最後安裝React Native CLI。這樣就可以用RNCLI創建RN應用。以前用過Android studio開發過Android應用，所以具體的不多贅述。
VScode代碼編輯器環境搭建。我之前用過vue，所有這一部分觸類旁通。不多贅述。
常用UI組件
感覺和Android studio裏的很相通。
- view組件：是RN最基本的組件；
- image組件：用來顯示多種不同類型的圖片；
- text組件：用來顯示文本；
- textInput組件：支持文字輸入的文本框；
- ScrollView組件：通過滾動操作將一系列不確定高度的子組件裝入固定的容器中；
- ListView組件：同於顯示一個可以垂直滾動的變化的數據列表；
- FlatList組件：代替ListView；
- SwipeableFlatList組件：在FlatList組件的基礎上實現側滑顯示菜單的功能，和側滑刪除效果類似；
- SectionList組件：用於分組、類、區時顯示的列表
網絡
移動應用開發需要從遠程地址獲取數據和資源，這時就需要用到網絡請求，RN中集成了Fetch API。使用Fetch API可以靈活高效使用HTTP和HTTPS的通信。
導航器
navigator是管理多個頁面的呈現、跳轉的組件。可以實現翻頁式、tab選項卡式、抽屜式的導航佈局。
數據存儲
RN框架提供了AsyncStorage API，其是一個簡單的、異步的、持久化的key-value存儲系統（我想到了Redis）。可以代替Android的SharePreference和iOS的NSUserDefaults。
原生模塊開發
有時候APP訪問平臺API，在RN中沒有相應的模塊包裝。RN設計可以在其基礎上編寫真實的原生代碼，並可以訪問平臺所有的能力。
功能有：獲取APP版本號、社會化分享、第三方登錄、從相冊選照片等；
RN實戰
做完RN使用的筆記後，我就不打算去嘗試RN的實戰了，只做簡單瞭解。除非工作需要，目前以vue全家桶爲主，在這裏學習RN的原因是我買的《大前端入門指南》裏面講跨端的部分用的是RN的例子，我打算觸類旁通。
在這本書的例子中，用RN開發一個完整的APP，主要功能包含啓動頁、登錄頁、註冊頁、首頁、個人中心也、書單詳情頁、側滑頁；
項目創建
用VScode，通過CLI創建項目。RN項目主要包含Android工程、iOS工程以及RN的JS部分。
index.js是整個程序的入口；在這個文件中會將APP.js創建的組件註冊進來。
app.js是整個程序的初始組件，這個組件會在index.js中進行註冊。
package.json主要是npm需要執行的腳本，以及依賴包的名稱和版本號。
Android目錄：在該目錄會生成Android項目的工程；
iOS目錄：在該目錄會生成iOS項目的工程；
APP目錄：存放RN頁面，根據不同業務模塊對目錄進行分層；裏面有common、component、img、navigate、util、view文件夾。
完善功能頁面
登錄註冊：在view文件夾創建一個login的文件夾，裏面創建LoginView組件、SplashView組件、RegisterView組件。實現啓動頁面組件、登錄頁面組件、註冊頁面組件以及頁面間跳轉的路由appStack.js.
首頁：包含底部的TabBar和書單列表頁面兩部分。在view文件夾創建book文件夾，裏面創建TabBottomBar組件、BookView組件、BookListView組件、
個人中心頁面：在view文件夾創建account文件夾，裏面創建MeView組件。
書單詳情：在book文件夾創建BookDetailView組件，主要包括書籍評論類別功能和發表評論的功能，界面主要由ScrollView和FlatList組件實現。
側滑頁面：在AppStack.js中創建一個側滑組件
打包
在發佈應用的時候，需要生成一個帶簽名的apk，一種是使用JDK下bin目錄中keytool工具生成一個簽名，一種是用Android studio的可視化界面生成簽名；
總結
算是瞭解了一點點RN，之後學習vue全家桶的手機端開發會有些啓發，不過目前還是以web前端爲主，其他跨端部分只是觸類旁通，用來參考，來理解vue。
多看看優秀組件的源碼，然後分析裏面的數據結構、算法、設計模式可以很有啓發。
在RN的介紹中，瞭解了react，可以和vue對比，增進vue的理解。
在RN的使用中，瞭解react的組件應用，感覺react模擬Android的過程。對react的應用有了新的啓發。
在RN的實戰中，瞭解RN項目的創建、頁面設計、打包這一個完整的開發過程。宏觀上了解了React框架實現跨端的過程。當前細節上有許多不足，不過作爲參考還是足夠的。
以上就是我的RN的初次嘗試，感覺東西都是觸類旁通的，越學越容易。以上可能不打算深入了。不過在vue的跨端使用上還是會進行實戰的。
感覺學習首先是理論，然後是實戰，最後就是反覆實戰，熟能生巧，反過來加深理解，加深理解後繼續實戰；用馬克思主義哲學來說就是認識具有反覆性和無限性；
更新地址：GitHub