.背景

隨著對(duì)用戶體驗(yàn)要求的提高，產(chǎn)品要求提升用戶體驗(yàn)，多端體驗(yàn)一致。隨著多端相同的業(yè)務(wù)也越來(lái)越多，需要投入IOS，Android，Web多端開(kāi)發(fā)人員。這就迫切的需要一種一次開(kāi)發(fā)同時(shí)使用在Android ，IOS ，Web的解決方案。達(dá)到降本增效的目的。在幾個(gè)小業(yè)面嘗試，總結(jié)經(jīng)驗(yàn)后，我們采用react-native-web多端適配。

2.問(wèn)題

a.對(duì)用戶體驗(yàn)要求越來(lái)越高，主推RN，flutter逐步替代原始H5。

b.現(xiàn)RN代碼獨(dú)立在汽車(chē)之家APP和二手車(chē)之家APP獨(dú)立運(yùn)行，在H5環(huán)境運(yùn)行還沒(méi)嘗試。

c.對(duì)RN接觸較多較熟悉,對(duì)VUE等開(kāi)發(fā)Html語(yǔ)言了解不多。

d.RN原生依賴(lài)的處理，大部分頁(yè)面vue開(kāi)發(fā)，如何掛載rn-web產(chǎn)物

3.解決方案

react-native-web走進(jìn)了我們的視線，簡(jiǎn)單介紹下rn-web，facebook公司維護(hù)的開(kāi)源項(xiàng)目，一個(gè)能使 react-native組件能運(yùn)行到web的庫(kù)。

4.說(shuō)干就干

? a.搭建rn-web環(huán)境

npx react-native init rnweb064 --version 0.64.2

注:為什么選這個(gè)版本，因?yàn)橹鬈浖F(xiàn)在是0.64.2版本，cocoapods因?yàn)閴Φ膯?wèn)題可能會(huì)失敗，不會(huì)爬墻的多試幾次也能成功。

yarn add react-native-web

rn-web的核心，他主要解決了react代碼轉(zhuǎn)譯js代碼

yarn add -D babel-plugin-react-native-web webpack webpack-cli webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack

h5開(kāi)發(fā)多件套，做H5的你應(yīng)該比我更熟悉。

直接拷貝 App.web.js、index.html、index.web.js、webpack.config.js

修改package.json增加編譯及打包

 "build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js",


"build1": "rm -rf dist/ && webpack --mode=development --config webpack.config.js",


"dev": "webpack-dev-server --config webpack.config.js --port 8090 --open",

修改后目錄結(jié)構(gòu)：

增加src文件夾，rn-web環(huán)境搭建到這里已完成，遇到各種環(huán)境報(bào)錯(cuò)不再列舉，現(xiàn)已可以運(yùn)行出demo ，大部分文章到這就結(jié)束了。

但我們需要解決的問(wèn)題幾乎是沒(méi)有提到的

1.如何調(diào)試log輸出；

2.如何集成在其他Html內(nèi)，并進(jìn)行相互通信；

3.react-native集成了原生橋接如何分離；

4.多端業(yè)務(wù)代碼如何管理

接下來(lái)開(kāi)始我們的src里編碼，并附上我們解決上述問(wèn)題的方案

需要注意

1.在webpack.config.js引入src文件夾，讓rn-web可編譯

2.index.html只是我們一個(gè)殼，我們并不直接使用，所以可以增加背景調(diào)試工具VConsole等

? b.rn編碼這里簡(jiǎn)單的介紹一個(gè)輸入框在H5的樣式

二手車(chē)APP（ios，android）；汽車(chē)之家（ios，android）；

具體實(shí)現(xiàn)，如何做到多端共用一套業(yè)務(wù)代碼。

頁(yè)面構(gòu)成分析

1.輸入框

2.listview

3.圖片

4.鍵盤(pán)處理

5.網(wǎng)絡(luò)請(qǐng)求

6.通知選擇回調(diào)

7.返回按鈕

8.公共工具類(lèi)（劉海屏判斷等）

上述大體分為三個(gè)部分

1.react-native默認(rèn)支持（1，2，3，4）

這部分我們無(wú)需處理，rn-web默認(rèn)支持。

2.主軟件獨(dú)立封裝（5，6，7）

我們采用同類(lèi)名，同方法名，區(qū)分端，空實(shí)現(xiàn)，保證業(yè)務(wù)代碼在不同平臺(tái)使用不同實(shí)現(xiàn)

業(yè)務(wù)入口-分端處理index.web.js和index.js分別持有下列入口

H5的入口 app.web.js

APP的入口 app.js

? a.網(wǎng)絡(luò)請(qǐng)求

H5 我們采用fetch實(shí)現(xiàn)

在APP端采用原生橋接的網(wǎng)絡(luò)庫(kù)實(shí)現(xiàn)

? b.通知實(shí)現(xiàn)

APP端同理使用現(xiàn)有封裝實(shí)現(xiàn)AHRNEventDispatcher不多介紹

h5頁(yè)面我們采用了同類(lèi)名，空實(shí)現(xiàn)，保證編譯正常。

現(xiàn)在我們能運(yùn)行一套業(yè)務(wù)代碼在不同的環(huán)境了，其他UI差異如何處理。

1.業(yè)務(wù)判斷Platform.OS !='web'

2.增加后綴如上圖，讓reactnative可選擇編譯。

? c.關(guān)于回調(diào)及H5裝載

rn-web打包后就是個(gè)js文件，可直接放到現(xiàn)有任何js文件中。注意需要放

入口。

這個(gè)js只是我們h5的一個(gè)頁(yè)面，其他頁(yè)面采用vue開(kāi)發(fā)，H5方法直接掛在window上，保證其他頁(yè)面能夠調(diào)用到。

ReactNative編碼如下：

if (Platform.OS=='web') {
let json=JSON.stringify(mData);
window.che168_map_addressData_example.addOverlayFromAddress(json);
this.closeThisView();
} else {
this._closeNativeView(mData);
}

H5目錄結(jié)構(gòu)

react目錄結(jié)構(gòu)

共享業(yè)務(wù)代碼HomeW，不同業(yè)務(wù)封裝Util，主軟件的reactnative-lib封裝usedcar-web-lib

? d.關(guān)于業(yè)務(wù)代碼如何共同管理，我們采用git子模塊進(jìn)行管理。

總結(jié)

本文這個(gè)業(yè)務(wù)比較簡(jiǎn)單，但也夠說(shuō)出關(guān)鍵思想，上述只有幾處依賴(lài)原生代碼，并進(jìn)行了依賴(lài)改動(dòng)

現(xiàn)有ReactNative已依賴(lài)大量原生橋接實(shí)現(xiàn)，這個(gè)修改是漫長(zhǎng)的，但為了體驗(yàn)這是值得的。

在后續(xù)業(yè)務(wù)中，我們將繼續(xù)同構(gòu)業(yè)務(wù)到rn-web進(jìn)行驗(yàn)證。

上述功能已在H5拍品直供，APP上門(mén)試駕發(fā)布。

作者簡(jiǎn)介

賈錫瑞

■ 二手車(chē)事業(yè)部-技術(shù)部。

■ 加入汽車(chē)之家多年，一直從事研發(fā)工作，現(xiàn)負(fù)責(zé)二手車(chē)之家以及其他汽車(chē)之家二手車(chē)業(yè)務(wù)的相關(guān)研發(fā)工作。

來(lái)源:微信公眾號(hào):之家技術(shù)

出處:https://mp.weixin.qq.com/s/Aeg4C7hEkc4hriwXUsZeaQ

????【摘要】盡管 React Native 已經(jīng)進(jìn)入開(kāi)源的第 6 個(gè)年頭，距離發(fā)布 1.0 版本依舊是遙遙無(wú)期。“Learn once, write anywhere”,完全不影響 React Native 淪為“不會(huì) JavaScript 也能用”的框架，那如何將在 React Native 項(xiàng)目中引入 react-native-web 呢？

react-native-web簡(jiǎn)介

倉(cāng)庫(kù)地址： https://github.com/necolas/react-native-web

react-native-web 是由 前 Twitter 現(xiàn) Facebook 工程師 Nicolas Gallagher 實(shí)現(xiàn)并維護(hù)的開(kāi)源項(xiàng)目，是一個(gè)使 React Native 組件和 API 能運(yùn)行在 Web 上的庫(kù)，其和 React Native Windows, ReactNative macOS 等庫(kù)將 React Native 拓展到一個(gè)又一個(gè)新的平臺(tái)。目前推特、expo、大聯(lián)盟足球、Flipkart、優(yōu)步、《泰晤士報(bào)》、DataCamp 以及我們小作坊都在生產(chǎn)中使用了 react-native-web。Chrome、Firefox、Edge，Safari 7 +、IE 10+都支持通過(guò) react-native-web 構(gòu)建的 web 應(yīng)用。當(dāng)然值得注意的是，官方文檔明確表示不支持 React Native 中不推薦使用的組件和 API，因此如果您項(xiàng)目中的某些功能依賴(lài)第三方庫(kù)，可能那部分的功能在 web 端同構(gòu)時(shí)需要額外處理。

淺顯地認(rèn)為react-native-web就是把React Native的組件和API都用適用于Web的標(biāo)簽和API再適配實(shí)現(xiàn)一遍，使其在Web上的行為和在原生應(yīng)用上盡量保持一致，從文檔中提到的 Alert 和 Setting 模塊以及其對(duì)應(yīng)的源碼中大概能感受到一二，比如TextInput：

因此也借鑒了 React Native 的一些代碼，作為適配的依據(jù)。

如果您想基于 React Native 實(shí)現(xiàn)多端統(tǒng)一化方案，可參考去哪兒前端團(tuán)隊(duì)的實(shí)現(xiàn)方案：跨端開(kāi)發(fā), 倉(cāng)庫(kù)地址：https://github.com/qunarcorp/qrn-remax-unir

添加到React Native項(xiàng)目

一般來(lái)說(shuō)新建 React Native 項(xiàng)目時(shí)可以選用 expo-cli 或者 react-native-cli 來(lái)創(chuàng)建。expo-cli 中已經(jīng)預(yù)置了對(duì)web的支持，如下圖所示

而我們實(shí)際開(kāi)發(fā)中可能用 react-native-cli腳手架來(lái)構(gòu)建項(xiàng)目比較多些，那么如何引入 react-native-web呢？

我們先初始化項(xiàng)目：

此時(shí)我們的項(xiàng)目并不支持在web中使用：

為了項(xiàng)目能在web環(huán)境中運(yùn)行，我們需要借助今天的主角--react-native-web，有請(qǐng)主角出臺(tái)：

cd rn_web

yarn add react-native-web

yarn add -D babel-plugin-react-native-web webpack webpack-cli

webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack

接著我們施展Copy大法，將我們初始化能用到的App.web.jsx、index.html、index.web.js、webpack.config.js這幾個(gè)文件一把 down下來(lái)：

curl -L https://gist.github.com/hu-qi/bde8a6d2b45325d93b1665174f938faa/download | tar -xvz --strip-components=1

react-native-web然后在package.json中添加build和web的腳本：

就和 expo-cli 初始化的項(xiàng)目一樣可以執(zhí)行yarn web,這時(shí)會(huì)在本地8080端口運(yùn)行一個(gè)服務(wù)，這時(shí)我們分別執(zhí)行yarn ios 和 yarn android就能看到在ios模擬器和Android模擬器中顯示和web端一模一樣的頁(yè)面,一次 react-native-web 的多端同構(gòu) Hello World 就成功實(shí)現(xiàn)了，當(dāng)然這也意味著我們還可能編譯成小程序，后續(xù)有機(jī)會(huì)一起探討探討！

此處的注意點(diǎn)：

1.代碼能得以成功拷貝全靠梯子，當(dāng)然也可以選擇去網(wǎng)頁(yè)下載；

2.Android能得以成功運(yùn)行，全靠給權(quán)限sudo 755 android/gradlew;

3.React Native 入口文件需修改為 App.web,不然只有Web端才能讀取App.web.js;

4.適當(dāng)執(zhí)行./gradlew clean重新yarn android等多年經(jīng)驗(yàn)積累騷操作排除故障。

探究代碼

關(guān)鍵的操作在于那行Copy代碼的命令，那究竟上文中提到到下載了4的文件到底做了啥呢？Copy攻城獅心中也有一個(gè)大大的問(wèn)號(hào)，Talk is cheap, show me the code，打開(kāi)文件看看那些代碼吧！

這與我們移動(dòng)端的index.js非常相似，不過(guò)它還將您的應(yīng)用程序掛載到根目錄中index.html的div上。

webpack雖然是重點(diǎn)內(nèi)容，但此處不過(guò)過(guò)多介紹，請(qǐng)前往官方文檔閱讀更加詳細(xì)的內(nèi)容，此案例中我們用到了三個(gè)插件：

o HtmlWebpackPlugin創(chuàng)建HTML；

o HotModuleReplacementPlugin用于熱模塊重裝；

o DefinePlugin定義變量，例如__DEV__或NODE_ENV中react-native-web。

該文件是臨時(shí)添加的文件，用于在使用React NativeWeb 同構(gòu)之前驗(yàn)證我們的設(shè)置是否正常運(yùn)行。最終，您可以刪除此文件，因?yàn)锳pp的入口js文件可以在移動(dòng)端運(yùn)行，也能在Web端運(yùn)行。不過(guò)為了處理某些在Web上能運(yùn)行而在移動(dòng)端不能運(yùn)行的業(yè)務(wù)，需要將代碼抽離出來(lái)存放在`.web.js`為后綴的文件中。

后記

結(jié)合上述的簡(jiǎn)單案例，在后續(xù)實(shí)際業(yè)務(wù)中，我們可以逐步嘗試同構(gòu)業(yè)務(wù)到Web并逐步進(jìn)行驗(yàn)證。

本文分享自華為云社區(qū)《ReactNative 項(xiàng)目 Web 端同構(gòu)初探》，原文作者：胡琦。

點(diǎn)擊關(guān)注，第一時(shí)間了解華為云新鮮技術(shù)~

家好，很高興又見(jiàn)面了，我是"高級(jí)前端進(jìn)階"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)！

今天給大家?guī)?lái)的主題是 NativeScript 和 React Native 之間的比較，隨著 NativeScript 8.5.4 版本的最新發(fā)布，我覺(jué)得是時(shí)候跟大家聊聊這個(gè)跨平臺(tái)原生應(yīng)用框架了。話不多說(shuō)，直接進(jìn)入正題！

1.什么是 NativeScript 和 React Native？

使用 JavaScript 構(gòu)建跨平臺(tái)移動(dòng)應(yīng)用程序已經(jīng)悄然改變了 JavaScript 開(kāi)發(fā)人員的默認(rèn)規(guī)則。 開(kāi)發(fā)人員不僅可以構(gòu)建在 Web 上運(yùn)行的應(yīng)用程序，還可以構(gòu)建使用 JavaScript 運(yùn)行的適用于 Android 和 iOS 的 Native 應(yīng)用程序。

而隨著 React Native 和 NativeScript 等不同框架的興起，開(kāi)發(fā)者已經(jīng)可以使用 JavaScript 構(gòu)建高效、生產(chǎn)就緒且可擴(kuò)展的移動(dòng)應(yīng)用程序。

首先一起來(lái)聊聊 NativeScript。NativeScript 的愿景是通過(guò)直接使用平臺(tái) API 來(lái)解放開(kāi)發(fā)，而無(wú)需使得開(kāi)發(fā)者放棄對(duì) JavaScript 的熱愛(ài)。 在與框架無(wú)關(guān)的團(tuán)隊(duì)中使用 JavaScript 構(gòu)建跨平臺(tái)移動(dòng)應(yīng)用程序時(shí)，值得將 NativeScript 視為首選工具。

? Empowering JavaScript with native platform APIs. ? Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ?? Angular, Capacitor, Ionic, React, Solid, Svelte, Vue with: SwiftUI, Jetpack Compose, Flutter and you name it compatible.

因此，無(wú)論選擇的 JavaScript 框架是 Vue、React、Svelte、Angular 還是 Vanilla JavaScript，NativeScript 都能滿足開(kāi)發(fā)者需求。

另一方面，React Native 是 Facebook 創(chuàng)建的一個(gè) JavaScript 庫(kù)，它使用 React 構(gòu)建原生移動(dòng)應(yīng)用程序，這意味著開(kāi)發(fā)者無(wú)法使用 Vue、Angular 或任何其他 JavaScript 框架來(lái)完成 React Native 的移動(dòng)應(yīng)用程序構(gòu)建。

但是，這并不意味著 App 或 Play 商店上的所有 React Native 應(yīng)用程序都是使用純 JavaScript 構(gòu)建的，因?yàn)樵谀承┣闆r下，開(kāi)發(fā)人員必須使用 Swift/Objective-C 或 Java/Kotlin 編寫(xiě) Native 代碼才能訪問(wèn)默認(rèn)情況下 JavaScript 不可用的 Native API 。

考慮到這一點(diǎn)，接下來(lái)一起看看 React Native 與 NativeScript 之間的比較。

2.NativeScript 和 React Native 社區(qū)支持

社區(qū)支持是選擇正確框架時(shí)要考慮的最重要因素之一，但是令人驚訝的是 NativeScript 比 React Native 存在的時(shí)間更長(zhǎng)。 NativeScript 的初始版本是在 2014 年，而 React Native 最初版本是在 2015 年 3 月 26 日發(fā)布。

雖然一年的差異似乎是一種優(yōu)勢(shì)，但 React Native 的增長(zhǎng)和采用率遠(yuǎn)高于 NativeScript。 React Native 在 npm 上記錄的每周下載量約為 1632k，而 NativeScript 每周平均下載量大約為 10k。

在貢獻(xiàn)者方面，React Native 在 GitHub 上擁有超過(guò) 2,506 名貢獻(xiàn)者，而 NativeScript 有 226 名貢獻(xiàn)者。 NativeScript 被超過(guò) 6k 名開(kāi)發(fā)人員使用，而 React Native 在 GitHub 上超過(guò) 1352k 的開(kāi)發(fā)人員使用。

這一巨大差距展示了開(kāi)發(fā)者社區(qū)對(duì) React Native 的廣泛采用，并影響了第三方庫(kù)的數(shù)量、錯(cuò)誤修復(fù)和 StackOverflow 上的答案。因此，在社區(qū)支持方面，React Native 更受歡迎。

3.NativeScript 和 React Native 快速入門(mén)

3.1 設(shè)置 React Native 項(xiàng)目

對(duì)于剛接觸移動(dòng)開(kāi)發(fā)的 Web 開(kāi)發(fā)人員來(lái)說(shuō)，開(kāi)始和設(shè)置 React Native 項(xiàng)目可能具有挑戰(zhàn)性，當(dāng)然可以借助于 Expo。Expo 用于構(gòu)建一個(gè)在所有用戶設(shè)備上本地運(yùn)行的 JavaScript/TypeScript 項(xiàng)目。

Build one JavaScript/TypeScript project that runs natively on all your users' devices.

可以通過(guò)下面命令快速使用 Expo:

npx create-expo-app my-app

雖然 Expo 確實(shí)有一些限制，但這些限制不會(huì)影響大多數(shù)使用 Expo 構(gòu)建的應(yīng)用程序。開(kāi)發(fā)者還可以使用 Expo Go，Expo Go 是一個(gè)免費(fèi)的開(kāi)源客戶端，用于在 Android 和 iOS 設(shè)備上測(cè)試 React Native 應(yīng)用程序，而無(wú)需在本地構(gòu)建任何東西。它允許開(kāi)發(fā)者打開(kāi)通過(guò) Expo CLI 提供的應(yīng)用程序，并在開(kāi)發(fā)它們時(shí)更快地運(yùn)行項(xiàng)目。

Expo Go在 Android Play 商店和 iOS App Store 上均可用。

• Android Play 商店 - Android Lollipop (5) 及更高版本
• iOS 應(yīng)用商店 - iOS 13 及更高版本

對(duì)于具有 React 背景的開(kāi)發(fā)人員來(lái)說(shuō)，開(kāi)始使用 React Native 更容易。 但是，如果選擇的主要 JavaScript 是 Angular，那么學(xué)習(xí)曲線可能會(huì)很陡峭。

3.2 設(shè)置 NativeScript 項(xiàng)目

在引導(dǎo) NativeScript 應(yīng)用程序時(shí)，使用官方模板開(kāi)始使用 NativeScript 相當(dāng)容易。 開(kāi)發(fā)者可以通過(guò)在終端中運(yùn)行以下命令來(lái)初始化帶有側(cè)邊抽屜的 NativeScript 應(yīng)用程序：

ns create myCoolApp --template <template-package-name>
// 直接運(yùn)行該命令
ns create myCoolApp --angular 
// or --ng for short
ns create myCoolApp --vue
ns create myCoolApp --vue --ts 
// for vue with typescript
ns create myCoolApp --react
ns create myCoolApp --js
ns create myCoolApp --svelte
// 使用指定風(fēng)格的默認(rèn)模板創(chuàng)建應(yīng)用程序

NativeScript 的優(yōu)點(diǎn)在于它與框架無(wú)關(guān)，這意味著開(kāi)發(fā)者可以使用 Angular、Vue、Svelte、React 甚至 Vanilla JavaScript 等 JavaScript 框架使用 NativeScript 構(gòu)建移動(dòng)應(yīng)用程序。

然而，與其他任何框架相比，NativeScript 與 Angular 的同步效果最好，因?yàn)?NativeScript 團(tuán)隊(duì)與 Google 合作以確保這兩種工具在構(gòu)建移動(dòng)應(yīng)用程序時(shí)能夠無(wú)縫工作。

通過(guò)使用 NativeScript Playground 應(yīng)用程序，開(kāi)發(fā)者可以在物理 Android 和 iOS 設(shè)備上運(yùn)行應(yīng)用程序，就像 Expo Go 一樣。

總體而言，Expo Go 應(yīng)用程序提供了比 NativeScript playground 更好的開(kāi)發(fā)人員體驗(yàn)，因此對(duì)于尋求更簡(jiǎn)單設(shè)置體驗(yàn)的開(kāi)發(fā)人員來(lái)說(shuō)，這是一個(gè)加分項(xiàng)。

4.NativeScript 和 React Native 熱加載

React Native 熱加載

熱加載功能在移動(dòng)應(yīng)用程序開(kāi)發(fā)中非常重要，因?yàn)闃O大地提高了開(kāi)發(fā)人員的工作效率。 沒(méi)有開(kāi)發(fā)人員愿意等待超過(guò)一分鐘時(shí)間來(lái)查看在開(kāi)發(fā)階段注入到移動(dòng)應(yīng)用程序中的每個(gè)小變化。

在 React Native 0.61 版本中，團(tuán)隊(duì)宣布了一項(xiàng)名為快速刷新的功能。 快速刷新統(tǒng)一了之前 React Native 版本中已經(jīng)存在的實(shí)時(shí)重新加載功能和熱重新加載功能。

啟用快速刷新后，開(kāi)發(fā)者可以對(duì)應(yīng)用程序進(jìn)行更改并幾乎立即看到更改。 默認(rèn)情況下，此功能會(huì)保留功能組件中的本地狀態(tài)，但不會(huì)保留類(lèi)組件中的本地狀態(tài)。

NativeScript 熱模塊替換

NativeScript 的熱模塊替換 (HMR) 功能在 NativeScript 5.3 中發(fā)布。 它支持 Visual Studio Code 調(diào)試，即使 HMR 功能仍在運(yùn)行，開(kāi)發(fā)人員也可以使用調(diào)試器。

NativeScript 還完全支持 SASS 文件，這意味著當(dāng)在應(yīng)用程序中對(duì) .scss 或 .sass 文件進(jìn)行更改時(shí)，會(huì)在開(kāi)發(fā)過(guò)程中快速反映在應(yīng)用程序中。HMR 在從 NativeScript 應(yīng)用程序目錄中添加或刪除文件時(shí)也能起作用。

NativeScript 也支持 .vue 文件中的腳本更改，但是在 Vue 中使用 TypeScript 時(shí)它有一個(gè)限制，并且在開(kāi)箱即用的 NativeScript Angular 項(xiàng)目中有完整的 HMR 支持，不需要額外的配置。

HMR 和快速刷新的性能相似，并且都具有巧妙構(gòu)建的功能，例如在 NativeScript 中調(diào)試 Visual Studio Code 和在 React Native 中進(jìn)行錯(cuò)誤恢復(fù)。

5.Native API

React Native API

React Native 附帶了一些基本的開(kāi)箱即用模塊，但在某些情況下，開(kāi)發(fā)者可能需要 React Native 尚無(wú)相應(yīng)模塊的原生功能。 在這種情況下，則必須編寫(xiě) Native 模塊（Native Modules）來(lái)與 Native API 進(jìn)行通信。

實(shí)現(xiàn)這一點(diǎn)需要特殊的橋梁，這需要一定程度的 Native 開(kāi)發(fā)專(zhuān)業(yè)知識(shí)。 但是，考慮到 React Native 生態(tài)的規(guī)模，開(kāi)發(fā)者可能很容易在 GitHub 或 npm 上找到現(xiàn)有的原生模塊。

NativeScript API

在 NativeScript 中訪問(wèn) Native Platform API 是 NativeScript 最重要的特性。 開(kāi)發(fā)人員可以從 JavaScript 調(diào)用平臺(tái) API，而不是使用 Objective-C 或 Kotlin 編寫(xiě)本機(jī)代碼。

const formatMessage=level=> `The Battery Level is: ${level}%`
// iOS直接原生訪問(wèn)！
let value=UIDevice.currentDevice.batteryLevel * 100
// Android 
let value=bm.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
alert(formatMessage(value))

這就是 NativeScript 優(yōu)于 React Native 的地方，因?yàn)?JavaScript 開(kāi)發(fā)人員不需要特定平臺(tái)語(yǔ)言的專(zhuān)業(yè)知識(shí)即可使用 Native API。

下面是一些 npm 包，其是 NativeScript 開(kāi)發(fā)的基礎(chǔ)并且很容易理解。

• @nativescript/core：一個(gè) JavaScript 庫(kù)，提供易于使用的 api，用于與 iOS 和 Android 平臺(tái) API 交互。
• @nativescript/android：支持 Android NativeScript 開(kāi)發(fā)的 v8 JavaScript 引擎運(yùn)行時(shí)。
• @nativescript/ios：支持 iOS NativeScript 開(kāi)發(fā)的 v8 JavaScript 引擎運(yùn)行時(shí)。開(kāi)發(fā)者還可以使用 npm 標(biāo)簽 JSC 使用此運(yùn)行時(shí)的 JavaScriptCore 版本，這對(duì)于可能遇到 v8 引擎問(wèn)題的項(xiàng)目很有用。
• @nativescript/types：是為所有可用于進(jìn)行 NativeScript 開(kāi)發(fā)的 iOS 和 Android API 提供了 TypeScript 定義。
• @nativescript/webpack：這為所有基礎(chǔ) NativeScript 開(kāi)發(fā)提供了加載程序、幫助程序和基本配置，以調(diào)試、運(yùn)行、構(gòu)建和發(fā)布應(yīng)用程序。
• nativescript：CLI（命令行界面）用于創(chuàng)建/運(yùn)行/構(gòu)建/部署 NativeScript 應(yīng)用程序。 通常通過(guò) npm install -g nativescript 進(jìn)行全局安裝以及適當(dāng)?shù)沫h(huán)境設(shè)置。

6.React Native 和 NativeScript 性能

NativeScript 應(yīng)用程序通常較慢，因?yàn)樵摽蚣懿捎?strong>單線程方法來(lái)訪問(wèn)本機(jī)設(shè)備 API。

與 NativeScript 不同，React Native 應(yīng)用程序使用多線程模型，其中 JavaScript 和應(yīng)用程序的界面在不同的線程上運(yùn)行。 因此，在構(gòu)建性能是關(guān)鍵因素的移動(dòng)應(yīng)用程序時(shí)，React Native 是最佳選擇。

React Native 還提供更快的 UI 渲染，因?yàn)樗褂锰摂M DOM 來(lái)更新應(yīng)用程序 UI，類(lèi)似于 React。

7.NativeScript 和 React Native 文檔支持

NativeScript 的文檔很容易理解，并且有一些關(guān)于如何實(shí)現(xiàn)動(dòng)畫(huà)、手勢(shì)、HTTP 請(qǐng)求和代碼共享等內(nèi)容的非常棒的插圖。

而且，對(duì)于 NativeScript 與 Svelte 和 Vue 的特定用例，有單獨(dú)的文檔。 但大多數(shù)時(shí)候，開(kāi)發(fā)人員必須在官方文檔之外了解 NativeScript 生態(tài)系統(tǒng)的工作原理。

React Native 擁有比 NativeScript 更成熟的生態(tài)系統(tǒng)，隨之而來(lái)的是對(duì)文檔明確的期望，因?yàn)榭缙脚_(tái)移動(dòng)應(yīng)用程序開(kāi)發(fā)的初學(xué)者和專(zhuān)家都可以訪問(wèn)它。

然而，雖然文檔通俗易懂，但缺乏細(xì)節(jié)，這可能會(huì)使初學(xué)者不清楚一些概念。

使用 Expo 構(gòu)建 React Native 應(yīng)用程序并使用 Expo 文檔簡(jiǎn)化了作為初學(xué)者構(gòu)建功能性 React Native 應(yīng)用程序的 React Native 文檔的使用。

兩者都沒(méi)有最好的文檔，使用這兩種框架的開(kāi)發(fā)人員通常必須超越官方文檔才能了解框架的各個(gè)方面。

8.使用 NativeScript 和 React Native 的公司

React Native 目前被 Facebook、Bloomberg、Coinbase、Discord、Tesla 等頂級(jí)品牌和公司用于生產(chǎn)。 這證明了 React Native 的規(guī)模和流行程度。

Facebook marketplace 也是用 React Native 構(gòu)建的，證明如果你有一個(gè)用本地語(yǔ)言編寫(xiě)的現(xiàn)有移動(dòng)應(yīng)用程序，你可以逐步采用 React Native 來(lái)構(gòu)建你的移動(dòng)應(yīng)用程序的不同部分。

盡管 React Native 在這里成為焦點(diǎn)，但這并不意味著 NativeScript 不能解決 React Native 為使用它的公司所做的業(yè)務(wù)問(wèn)題。 看看這里使用 NativeScript 構(gòu)建的很棒的應(yīng)用程序表明它可以構(gòu)建生產(chǎn)就緒的移動(dòng)應(yīng)用程序。

9.本文總結(jié)

作為 Web 開(kāi)發(fā)人員使用 JavaScript 構(gòu)建移動(dòng)應(yīng)用程序是一種很棒的體驗(yàn)，因?yàn)樵撜Z(yǔ)言在 Web 瀏覽器上運(yùn)行以構(gòu)建適用于 Android 和 iOS 的本機(jī)應(yīng)用程序。 在所有用于構(gòu)建跨平臺(tái)應(yīng)用程序的 JavaScript 框架中，React Native 和 NativeScript 位居榜首。

在這篇文章中，我們介紹了每個(gè)框架的獨(dú)特之處以及它們的發(fā)展程度。 選擇任一框架最終取決于移動(dòng)應(yīng)用程序的要求、性能成本、首選 JavaScript 框架、移動(dòng)應(yīng)用程序開(kāi)發(fā)的先驗(yàn)知識(shí)以及所需的本機(jī) API。

因?yàn)槠邢蓿恼虏](méi)有過(guò)多展開(kāi)，如果有興趣，可以在我的主頁(yè)繼續(xù)閱讀，同時(shí)文末的參考資料提供了大量?jī)?yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點(diǎn)贊、評(píng)論、轉(zhuǎn)發(fā)、收藏！

參考資料

https://blog.logrocket.com/nativescript-react-native/

https://nativescript.org/

https://docs.nativescript.org/understanding-packages.html#nativescript-ios

https://www.monterail.com/blog/nativescript-vs-react-native

https://docs.nativescript.org/introduction.html

https://github.com/facebook/react-native

https://tsh.io/blog/react-native-vs-nativescript/

https://tsh.io/blog/react-native-vs-nativescript/

https://docs.nativescript.org/#overview-of-nativescript-development