React Native，是一個混合移動應(yīng)用開發(fā)框架，本文根據(jù) By C. Enrique Ortiz 的文章 Dissecting React Native 同時結(jié)合自己開發(fā)中的一些理解編寫。React Native 是目前流行的跨平臺移動應(yīng)用開發(fā)框架之一。本文概述了 React Native，以及作者在開發(fā) React Native 應(yīng)用的最佳實踐經(jīng)驗雜談。

在開發(fā)移動應(yīng)用時，我們可以選擇使用原生，純基于 Web 或使用混合方法（即使用原生和基于 Web 的技術(shù)的組合）?？梢允褂?Apache Cordova（或 Adobe PhoneGap）等開源平臺編寫 HTML，CSS 和 JavaScript 的跨平臺混合應(yīng)用。這些應(yīng)用在原生 Web 視圖（瀏覽器）中運行，所以看著就像 Web 應(yīng)用，不過可以使用 JavaScript 和一些 Apache Cordova 插件調(diào)用原生功能和 API。

所以可以使用類似于 Web 應(yīng)用而非原生應(yīng)用的用戶界面上架到 Apple Store 或 Google Play 的應(yīng)用。或者，可以使用 C＃，XAML 和 CSS 使用 Xamarin 來編寫原生應(yīng)用。對于用 HTML5，CSS 和 JavaScript 編寫的非原生移動 Web 應(yīng)用，還可以配套使用 jQuery Mobile 等框架。

React Native 采用不同的方法進(jìn)行混合移動應(yīng)用開發(fā)。它不會生成原生 UI 組件，而是基于 React，React Native 是一個用于構(gòu)建基于 Web 的交互界面的 JavaScript 庫，因此會有更豐富的 UI 體驗效果，同時也能夠很好地調(diào)用底層框架的UI使用。 React Native 已經(jīng)成為一種流行的移動開發(fā)技術(shù)，它提供了一個使用 JavaScript 構(gòu)建原生跨平臺移動應(yīng)用的強(qiáng)大框架，在需要時，我們也可以使用 Objective-C，Swift或 Java 來編寫原生代碼來橋接。

使用 React Native 有利有弊。從積極的方面來說，React Native 已經(jīng)成為受支持的開源社區(qū)的熱門，可以使用一組技術(shù)（如 JSX，React Native 組件和 JavaScript）為 iOS 和 Android 構(gòu)建移動應(yīng)用。這反過來有助于在發(fā)布新版本時使 iOS 和 Android 應(yīng)用保持同步。但是，React Native 仍在不斷發(fā)展，當(dāng)要在當(dāng)前不需要 React Native 提供的功能（例如如何進(jìn)行UI導(dǎo)航或使用地圖）時決定使用哪些庫時，可能會造成混淆。此外，根據(jù)應(yīng)用的復(fù)雜程度，可能需要編寫區(qū)別于平臺的代碼來解決移動平臺的差異。對于復(fù)雜的應(yīng)用，可能要編寫自定義組件或深入了解 iOS 和 Android（例如，出于性能原因或?qū)?React Native 添加到現(xiàn)有原生應(yīng)用時所需的但不支持的UI組件）。

配置 React Native 環(huán)境

React Native 的核心語言是 JavaScript，特別是 ECMAScript 6（ES6）。因此，需要熟悉ES6的一些最新功能。此外，在開始開發(fā)第一個 React Native 應(yīng)用之前，需要安裝必備的工具，比如 IDE，JavaScript 庫等。另外，還需要了解核心的 React Native API。

ECMAScript 6 功能

ES6 引入了許多改進(jìn)，其中一些值得一提，因為它們在最新的 React Native 框架中已經(jīng)被用到：

變量和作用域：關(guān)鍵字 var，let 和 const 表示變量作用域，其中 var 是函數(shù)作用域，let 是塊作用域，const 也是塊作用域。 const 變量是常量，但在 JavaScript 中對于對象和數(shù)組來說，它是可變的。解釋器將變量聲明提升或移動到var 聲明的作用域頂部，而 let 和 const 聲明不會被掛起。

箭頭函數(shù)：一種新類型的函數(shù)，它允許更緊湊，更簡潔的表示法，并且具有靜態(tài)或詞匯的定義（它不會在詞法上圍繞它），可以看以下這些示例。

沒有指定參數(shù)的箭頭函數(shù)：

帶一個參數(shù)，注意省略了的括號：

指定幾個參數(shù)：

參數(shù)定義和箭頭函數(shù)的箭頭必須在同一行中。

Promises：Promises 是異步編程的替代API，它提供了優(yōu)于傳統(tǒng)回調(diào)（如鏈接和并行執(zhí)行）的優(yōu)勢。

比較以前的異步函數(shù)：

這只是新功能的一個示例，但還有許多其他功能。關(guān)于ES6的一個很好的在線參考是 Axel Rauschmayer 的 Exploring ES6。

接下來，我們來看看如何設(shè)置開發(fā)平臺和環(huán)境。

設(shè)置環(huán)境和工程

目前來看，開發(fā) iOS 原生應(yīng)用只能用 macOS 系統(tǒng)。由于大多數(shù)移動應(yīng)用都會涉及到 Android 和 iOS兩端，因此應(yīng)該考慮使用 Mac 來開發(fā) React Native 移動應(yīng)用。

在創(chuàng)建項目之前，你需要安裝一堆東西，主要包括：

Android Studio和Xcode工具：安裝最新版本以構(gòu)建和發(fā)布應(yīng)用。對于 Android 開發(fā)，確保為要運行的Android API 版本配置正確的模擬器。

JavaScript IDE或文本編輯器：不需要使用 Xcode 或 Android Studio 來編寫 JavaScript 代碼，真正需要的只是一個文本編輯器。比如使用 Atom（由 GitHub 開發(fā)），Sublime Text 或喜歡的任何優(yōu)秀文本編輯器，筆者目前用的是 VSC。

JavaScript 或 React Native 包：安裝一些工具來管理 React Native 軟件包以及三方庫，包括：

從 nodejs.org 下載 node.js：為了讓JavaScript 運行時允許訪問npm，這是一個由 node.js 項目創(chuàng)建的便捷工具，可用于管理開源軟件包。確保下載 node.js 的最新 LTS（長期支持）版本。此下載中還包括一個名 為 Metro bundler 的開發(fā)服務(wù)器，它在調(diào)試時能夠提供實時更新渲染。

下載 create-react-native-app：可以使用此工具開始開發(fā)。它可以創(chuàng)建一個基礎(chǔ)項目。使用 npm 來下載：

下載常用的第三方庫。 React Nativ 提供了很多基礎(chǔ)組件，與原生 API 使用相比會更加簡單。常規(guī)的移動應(yīng)用使用可能包括有相機(jī)，管理狀態(tài)，并具有導(dǎo)航，地圖，圖標(biāo)和復(fù)選框。

這都都可以從 React Native 社區(qū)獲取對用組件：

react-native-navigation

react-native-vector-icons

redux

React-native-maps

可以到React Native Elements獲取需要的其他UI組件元素。開發(fā)一個完整功能的 app 時，需要用到上面提到的 UI 組件。用這個方法來安裝以前的 packages ：

React Native Debugger：這是一個非常棒的調(diào)試器，同時它還是一個獨立的應(yīng)用，里面能用到的工具包括 React Inspector 和 Redux DevTools。配置好環(huán)境后可以連接到應(yīng)用（注意：一次只能調(diào)適一個應(yīng)用），可以很方便的實時查看 React Native 應(yīng)用的狀態(tài)，調(diào)適必備工具,如圖所示:

現(xiàn)在，來建立一個簡單應(yīng)用并運行一下：

1.創(chuàng)建工程。用以下語句來創(chuàng)建，指定創(chuàng)建的工程路徑，默認(rèn)創(chuàng)建在當(dāng)前路徑下：

注意：這一步創(chuàng)建了一個沒有進(jìn)行任何配置的 React Native app 模板。在 GitHub 項目中閱讀有關(guān) create-react-native-app 的更多信息。

安裝完成后，可以使用 npm 執(zhí)行以下命令來運行應(yīng)用：

npm start 運行 app

npm run ios：跟 npm start 相似，這是用來運行 iOS 應(yīng)用

npm run android：運行 Android 應(yīng)用，如果需要運行模擬器，需要提前打開模擬器

npm run eject：從當(dāng)前的 create-react-native 模式中彈出 app，這樣就可以完全控制應(yīng)用構(gòu)建過程（筆者沒用過）

2.啟動 app。通過運行 npm run android 和 npm run ios 在模擬器上運行應(yīng)用。這將在開發(fā)模式下啟動應(yīng)用。同時還會啟動 Metro bundler，可以在修改代碼后實時更新應(yīng)用（在調(diào)試移動應(yīng)用時這很棒）。

如果運行成功，會有這樣的提示：

React Native API 概述

我們簡單快速瀏覽一下 React Native API ，從 React 轉(zhuǎn)變過來的 React Native ，它繼承了 JSX，state，props 和組件生命周期的概念。然后，它通過提供對原生UI組件和功能的支持來擴(kuò)展 React。這是通過導(dǎo)入 React 和 React Native 功能來實現(xiàn)的，如清單1所示：

清單1.從 React 和 React Native 導(dǎo)入

導(dǎo)入后，我們就可以訪問 React Native 對應(yīng)的組件，這些組件支持我們所需的許多常用UI組件：

基礎(chǔ)UI組件：如 View，Text，Image，TextInput，ScrollView 和 StyleSheet。此外，還提供了UI控件，如Button，Picker，Slider 和 Switch。

列表：FlatList（用于呈現(xiàn)可滾動列表）和 SectionList（類似于 FlatList 但用于分段列表）的列表

Android 專用組件：如 Android BackHandler，DatePickerAndroid，ToastAndroid。

iOS 專用組件：如 AlertIOS，ImagePickerIOS，NavitatorIOS，TabBarIOS。

通用組件：可以在 Components and APIs 上查詢所有的公共組件。

還有一點需要注意，React Native 還提供了很多原來不支持的功能。比如使用地圖，甚至是圖標(biāo)和復(fù)選框。雖然底層操作系統(tǒng)支持，但 React Native 還是需要安裝第三方庫。也就是說，React Native（包括開發(fā)工具）所支持的任何復(fù)雜或不受支持的內(nèi)容都要求我們編寫其他代碼或使用第三方庫來承載。

使用 React Native 構(gòu)建應(yīng)用

常規(guī)的的 React Native 應(yīng)用由許多組件組成，如圖所示：

在一個應(yīng)用容器中，每個界面會包含一個或多個 View（和樣式），界面跳轉(zhuǎn)導(dǎo)航，狀態(tài)管理和數(shù)據(jù)模型。還有本地存儲和網(wǎng)絡(luò)請求功能。最后但并非最不重要的是，有很多第三方庫可以擴(kuò)展應(yīng)用的功能。

以下介紹部分圖中內(nèi)容：

Screens: Views and styles

應(yīng)用容器中包含多個 screen 和其他組件的集合。應(yīng)用本身由許多 screen 組成，每個 screen 包含多個視圖，如按鈕，文本輸入和列表。View 是構(gòu)建用戶界面的最基本組件，映射到 iOS 和 Android 的原生 View 組件。

清單2是一個界面示例，包含一個列表，使用 ScrollView 實現(xiàn)，以及一個封裝在 Checkbox UI 組件中的任務(wù)列表：

代碼中列表組件需要導(dǎo)入各種依賴項，包括 React Native 中未找到的第三方Checkbox UI組件，可以從 React Native Elements下載該組件。

在清單2中，UI組件和樣式是分開的。我們可以創(chuàng)建更高級UI組件并與樣式隔離開。我們把所有組件放到一個子目錄中，每個組件都有其 component.js 和 style.js 文件，如清單3所示：

或者，使用更通用的方法：

清單4顯示了一個樣式文件的示例：

樣式需要使用 StyleSheet 組件創(chuàng)建，它類似于 CSS 樣式表?？梢圆榭?individual UI component 獲取更多樣式屬性。

自適應(yīng)布局

React Native 提供了一個 Dimensions 組件來檢測屏幕尺寸：

Dimensions 可根據(jù)需要實時調(diào)整界面UI;例如，我們可以根據(jù)需要的應(yīng)用樣式，在方向更改時調(diào)整UI，包括改變橫向與縱向方向的文本輸入字段的位置和長度。

另外我們還可能需要處理另一種情況的UI適配。比如需要實現(xiàn) Androi d或 iOS 特有的行為的情況。包括與兩端系統(tǒng)相關(guān)的差異，例如UI控件的呈現(xiàn)及使用。要解決此設(shè)計問題，我們需要使用不同的邏輯或樣式，或者在更復(fù)雜的情況下，實現(xiàn)自定義組件。因此 React Native 提供了不同的方法來檢測系統(tǒng)，以便可以以編程方式?jīng)Q定要執(zhí)行的操作：使用 Platform 組件甚至使用特定于平臺的文件擴(kuò)展名。

使用Platform 組件檢測系統(tǒng)會返回“ios”或“android”。例如：

Platform 還提供 Platform.select 和 Platform.Version，分別用于檢測平臺和平臺版本。應(yīng)該僅對較小的更改使用 Platform.O S和 Platform.select。否則，我們將使用大量硬編碼的 if 或 switch 語句，這會使寫的代碼更難以遵循。

如果要編寫更復(fù)雜的代碼或組件，則應(yīng)使用特定于平臺的文件擴(kuò)展名。在這種方法中，使用每個平臺文件拆分代碼。也就是說，如果我們的代碼不能跨平臺公用，比如我們的任務(wù)列表，那么將編寫兩個文件，一個用于 iOS，一個用于Android，然后讓 React Native 選擇對應(yīng)的文件：

然后，讓React Native選擇正確的文件：

本文未介紹 iOS 和 Android 之間究竟有什么不同，但要注意的事項包括渲染和常規(guī)組件或UI控件使用布局。現(xiàn)在，如果事實證明 Android 與 iOS 應(yīng)用的布局設(shè)計在主要方面有所不同，我們可以分別使用 index.ios.js 和 index.android.js 文件而不是 index.js 來控制主應(yīng)用。這就可以完全控制不同平臺的應(yīng)用布局和流程。為了最大限度地減少重復(fù)代碼，需要將其重新打包為可重用的程序。

導(dǎo)航

React Native 中的導(dǎo)航是一個具有挑戰(zhàn)性的領(lǐng)域，因為 React Native 提供的導(dǎo)航要么不夠強(qiáng)大，要么僅針對 iOS。相反，有大量社區(qū)項目試圖解決跨平臺導(dǎo)航問題，其中一些項目比其他項目更受歡迎。這里只是重點闡述當(dāng)下流行的 React Native Navigation。

React Native Navigation 提供了一套非常完整的 API 來注冊界面組件，包括含有 tab 的應(yīng)用，以及啟動單個界面應(yīng)用。同時它還提供了其他 API 來管理模態(tài)跳轉(zhuǎn)和導(dǎo)航跳轉(zhuǎn)，以及用于處理堆棧，處理按鈕，可見性以及自定義導(dǎo)航器本身的低級 API。

安裝最新穩(wěn)定版本的 react-native-navigation（運行 npm install react-native-navigation --save）并按照其網(wǎng)站上的 Android 和 iOS 安裝說明進(jìn)行操作

另外必須通過調(diào)用 registerComponent（）將唯一名稱的 Navigator 注冊到所有 screen 組件。注冊后，就能運行包含 Tab 的應(yīng)用或單個 screen 應(yīng)用，如清單8所示：

如果是基于 tab 的使用，則需要創(chuàng)建更多的 screen ，因為必須指明不同的 tab 及其關(guān)聯(lián)的 screen ，tab 詳細(xì)信息和樣式，例如：

可以根據(jù)需要通過調(diào)用相應(yīng)的功能在單個和基于 tab 的 screen 之間切換。另外，請注意前一個示例中抽屜的使用?？梢詾閱蝹€ screen 應(yīng)用和基于 tab 的應(yīng)用定義抽屜側(cè)面菜單。

state 管理

在 React（和 React Native）中，props 和 state 用于控制組件。 props（properties）是用于在創(chuàng)建組件時自定義組件的參數(shù)。例如，Button 組件為許多屬性提供支持;在清單10中，title 和 onPress 是 props。

屬性由 React 自身設(shè)置（由父組件設(shè)置），并在組件的整個生命周期內(nèi)保持固定。 State 是應(yīng)用內(nèi)的特殊數(shù)據(jù)，可根據(jù)需要進(jìn)行更改以驅(qū)動組件行為，比如刷新數(shù)據(jù)。state 應(yīng)該在構(gòu)造函數(shù)中初始化，并且只能通過調(diào)用 setState 來更改。清單11顯示了 state 的用法：

清單11是一個簡單 state 管理的示例，但如果應(yīng)用對于許多 screen 組件和組件間狀態(tài)管理更復(fù)雜，則應(yīng)該利用 Redux。 Redux 是一種更先進(jìn)的 state 管理方法，它提供了一個實現(xiàn) state 管理及相關(guān)操作和處理程序的框架。但是使用 Redux 會增加應(yīng)用的復(fù)雜性，因此應(yīng)該考慮僅在真正需要它時使用它（即，對于較大的復(fù)雜應(yīng)用）。

持久化存儲

React Native 使用 AsyncStorage 為持久化存儲提供支持，AsyncStorage 是一個易于使用的基于鍵值的異步（持久）存儲系統(tǒng)，對整個應(yīng)用而言是全局的。它很簡單，因為它不需要過多的設(shè)置。在 iOS 上，它表現(xiàn)為一系列字典或者是文件。在Android 上，它基于 SQLite 或 RocksDB：

但是 AsyncStorage 有許多限制，例如性能低下，沒有索引，也沒有加密。讓我再說一遍：它沒有加密。如果要存儲大量數(shù)據(jù)，性能和加密是應(yīng)用的重要因素，則應(yīng)考慮使用 Realm React Native 等替代方案。 Realm React Native 是跨平臺的，性能更好，支持加密，甚至還帶有版本的 ListView（具有與 React Native ListView 相同的 API 簽名），它在 Realm 之上進(jìn)行了優(yōu)化，大大改善了對本地存儲的訪問。 Realm 使用 static schema 的途徑來提高性能。

網(wǎng)絡(luò)

移動應(yīng)用通常是需要網(wǎng)絡(luò)連接的應(yīng)用。移動應(yīng)用連接到網(wǎng)絡(luò)以進(jìn)行身份??驗證。 React Native 提供不同的網(wǎng)絡(luò) API：

最初的 Ajax（異步JavaScript + XML）XMLHttpRequest API 

WebSockets，通過TCP 連接提供全雙工通信通道,也叫做雙向平等對話

Fetch API，該系列的最新成員，類似于 XMLHttpRequest，但具有其他功能。

清單14使用 fetch API 從服務(wù)器獲取用戶數(shù)據(jù)的 json 文件：

關(guān)于 fetch API 和網(wǎng)絡(luò)的一些注意事項：

請注意清單14中 Promise 的使用。即使響應(yīng)是 HTTP 404 或 500，fetch 也不會失敗（拒絕）。換句話說，它只會拒絕網(wǎng)絡(luò)故障。檢測非網(wǎng)絡(luò)故障的方法是檢查 status 是否正常返回。

默認(rèn)情況下，iOS 會阻止未使用 SSL 加密的請求。解決此問題的唯一方法是添加 App Transport Security。

可以使用 NetInfo 來檢測或檢索網(wǎng)絡(luò)信息。它可以檢測有網(wǎng)或無網(wǎng)絡(luò)狀態(tài)，連接類型（Wi-Fi，蜂窩）和有效連接類型（2G，3G和4G），不過對于兩個端來說這個還有一些區(qū)別。

結(jié)論

本文僅是對 React Native 提供了一個高層次的觀點看法。 React Native 是一個很復(fù)雜的話題。如果要深究，則需要更詳細(xì)地研究本文所涵蓋的每個領(lǐng)域。

React Native 是一個充滿活力且不斷發(fā)展的框架和社區(qū)。但 React Native 并不像原生應(yīng)用開發(fā)那樣成熟。所以必須為Android，iOS 和 React Native 的開發(fā)保持穩(wěn)定的環(huán)境，包括所有相關(guān)的開發(fā)工具。對 于React Native 中不存在的組件，可以 Google 搜索，就可以找到所需內(nèi)容，請記住所選的第三方庫可能會更改或維護(hù)可能會停止或被放棄，這是一個要考慮的主要風(fēng)險。

React Native 并不適合所有人或每個項目。這需要考慮創(chuàng)建和維護(hù) React Native 代碼，工具，開發(fā)環(huán)境和技能集的時間，精力和成本，而不是僅僅關(guān)注原生代碼。去年也有大型開發(fā)組織的例子，例如 Airbnb，它們在 React Native 上投入了大量的精力和投入，但最終決定回歸純粹的原生開發(fā)。

文章來源：簡書，作者：廣州蘆葦科技

編輯：云朵匠 | 數(shù)商云(微信ID：shushangyun_com)

【數(shù)商云www.zhimaihui.cn】致力于提供企業(yè)級的電商平臺服務(wù)，長期為大中型企業(yè)打造數(shù)據(jù)化、商業(yè)化、智能化的電子商務(wù)網(wǎng)站開發(fā)解決方案，同時我們還提供B2B交易系統(tǒng)、B2B2C多用戶商城系統(tǒng)、B2C電子商務(wù)系統(tǒng)、跨境進(jìn)口電商平臺、供應(yīng)商系統(tǒng)、SRM供應(yīng)商管理系統(tǒng)、SCM系統(tǒng)、渠道管理系統(tǒng)等一系列系統(tǒng)定制開發(fā)服務(wù)，通過大數(shù)據(jù)、云計算等新技術(shù)協(xié)助企業(yè)打造供應(yīng)端—渠道端—營銷端—數(shù)據(jù)端等全鏈數(shù)字化運營體系，提升企業(yè)運營效益與智慧數(shù)字化商業(yè)轉(zhuǎn)型。