整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
.背景
隨著對用戶體驗要求的提高，產(chǎn)品要求提升用戶體驗，多端體驗一致。隨著多端相同的業(yè)務也越來越多，需要投入IOS，Android，Web多端開發(fā)人員。這就迫切的需要一種一次開發(fā)同時使用在Android ，IOS ，Web的解決方案。達到降本增效的目的。在幾個小業(yè)面嘗試，總結經(jīng)驗后，我們采用react-native-web多端適配。
2.問題
a.對用戶體驗要求越來越高，主推RN，flutter逐步替代原始H5。
b.現(xiàn)RN代碼獨立在汽車之家APP和二手車之家APP獨立運行，在H5環(huán)境運行還沒嘗試。
c.對RN接觸較多較熟悉,對VUE等開發(fā)Html語言了解不多。
d.RN原生依賴的處理，大部分頁面vue開發(fā)，如何掛載rn-web產(chǎn)物
3.解決方案
react-native-web走進了我們的視線，簡單介紹下rn-web，facebook公司維護的開源項目，一個能使 react-native組件能運行到web的庫。
4.說干就干
? a.搭建rn-web環(huán)境
npx react-native init rnweb064 --version 0.64.2
注:為什么選這個版本，因為主軟件現(xiàn)在是0.64.2版本，cocoapods因為墻的問題可能會失敗，不會爬墻的多試幾次也能成功。
yarn add react-native-web
rn-web的核心，他主要解決了react代碼轉譯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開發(fā)多件套，做H5的你應該比我更熟悉。
直接拷貝 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",修改后目錄結構：
增加src文件夾，rn-web環(huán)境搭建到這里已完成，遇到各種環(huán)境報錯不再列舉，現(xiàn)已可以運行出demo ，大部分文章到這就結束了。
但我們需要解決的問題幾乎是沒有提到的
1.如何調試log輸出；
2.如何集成在其他Html內，并進行相互通信；
3.react-native集成了原生橋接如何分離；
4.多端業(yè)務代碼如何管理
接下來開始我們的src里編碼，并附上我們解決上述問題的方案
需要注意
1.在webpack.config.js引入src文件夾，讓rn-web可編譯
2.index.html只是我們一個殼，我們并不直接使用，所以可以增加背景調試工具VConsole等
? b.rn編碼這里簡單的介紹一個輸入框在H5的樣式
二手車APP（ios，android）；汽車之家（ios，android）；
具體實現(xiàn)，如何做到多端共用一套業(yè)務代碼。
頁面構成分析
1.輸入框
2.listview
3.圖片
4.鍵盤處理
5.網(wǎng)絡請求
6.通知選擇回調
7.返回按鈕
8.公共工具類（劉海屏判斷等）
上述大體分為三個部分
1.react-native默認支持（1，2，3，4）
這部分我們無需處理，rn-web默認支持。
2.主軟件獨立封裝（5，6，7）
我們采用同類名，同方法名，區(qū)分端，空實現(xiàn)，保證業(yè)務代碼在不同平臺使用不同實現(xiàn)
業(yè)務入口-分端處理index.web.js和index.js分別持有下列入口
H5的入口 app.web.js
APP的入口 app.js
? a.網(wǎng)絡請求
H5 我們采用fetch實現(xiàn)
在APP端采用原生橋接的網(wǎng)絡庫實現(xiàn)
? b.通知實現(xiàn)
APP端同理使用現(xiàn)有封裝實現(xiàn)AHRNEventDispatcher不多介紹
h5頁面我們采用了同類名，空實現(xiàn)，保證編譯正常。
現(xiàn)在我們能運行一套業(yè)務代碼在不同的環(huán)境了，其他UI差異如何處理。
1.業(yè)務判斷Platform.OS !='web'
2.增加后綴如上圖，讓reactnative可選擇編譯。
? c.關于回調及H5裝載
rn-web打包后就是個js文件，可直接放到現(xiàn)有任何js文件中。注意需要放
入口。
這個js只是我們h5的一個頁面，其他頁面采用vue開發(fā)，H5方法直接掛在window上，保證其他頁面能夠調用到。
ReactNative編碼如下：
if (Platform.OS=='web') {
let json=JSON.stringify(mData);
window.che168_map_addressData_example.addOverlayFromAddress(json);
this.closeThisView();
} else {
this._closeNativeView(mData);
}H5目錄結構
react目錄結構
共享業(yè)務代碼HomeW，不同業(yè)務封裝Util，主軟件的reactnative-lib封裝usedcar-web-lib
? d.關于業(yè)務代碼如何共同管理，我們采用git子模塊進行管理。
總結
本文這個業(yè)務比較簡單，但也夠說出關鍵思想，上述只有幾處依賴原生代碼，并進行了依賴改動
現(xiàn)有ReactNative已依賴大量原生橋接實現(xiàn)，這個修改是漫長的，但為了體驗這是值得的。
在后續(xù)業(yè)務中，我們將繼續(xù)同構業(yè)務到rn-web進行驗證。
上述功能已在H5拍品直供，APP上門試駕發(fā)布。
作者簡介
賈錫瑞
■ 二手車事業(yè)部-技術部。
■ 加入汽車之家多年，一直從事研發(fā)工作，現(xiàn)負責二手車之家以及其他汽車之家二手車業(yè)務的相關研發(fā)工作。
來源:微信公眾號:之家技術
出處:https://mp.weixin.qq.com/s/Aeg4C7hEkc4hriwXUsZeaQ
????【摘要】盡管 React Native 已經(jīng)進入開源的第 6 個年頭，距離發(fā)布 1.0 版本依舊是遙遙無期。“Learn once, write anywhere”,完全不影響 React Native 淪為“不會 JavaScript 也能用”的框架，那如何將在 React Native 項目中引入 react-native-web 呢？
倉庫地址： https://github.com/necolas/react-native-web
react-native-web 是由 前 Twitter 現(xiàn) Facebook 工程師 Nicolas Gallagher 實現(xiàn)并維護的開源項目，是一個使 React Native 組件和 API 能運行在 Web 上的庫，其和 React Native Windows, ReactNative macOS 等庫將 React Native 拓展到一個又一個新的平臺。目前推特、expo、大聯(lián)盟足球、Flipkart、優(yōu)步、《泰晤士報》、DataCamp 以及我們小作坊都在生產(chǎn)中使用了 react-native-web。Chrome、Firefox、Edge，Safari 7 +、IE 10+都支持通過 react-native-web 構建的 web 應用。當然值得注意的是，官方文檔明確表示不支持 React Native 中不推薦使用的組件和 API，因此如果您項目中的某些功能依賴第三方庫，可能那部分的功能在 web 端同構時需要額外處理。
淺顯地認為react-native-web就是把React Native的組件和API都用適用于Web的標簽和API再適配實現(xiàn)一遍，使其在Web上的行為和在原生應用上盡量保持一致，從文檔中提到的 Alert 和 Setting 模塊以及其對應的源碼中大概能感受到一二，比如TextInput：
因此也借鑒了 React Native 的一些代碼，作為適配的依據(jù)。
如果您想基于 React Native 實現(xiàn)多端統(tǒng)一化方案，可參考去哪兒前端團隊的實現(xiàn)方案：跨端開發(fā), 倉庫地址：https://github.com/qunarcorp/qrn-remax-unir
一般來說新建 React Native 項目時可以選用 expo-cli 或者 react-native-cli 來創(chuàng)建。expo-cli 中已經(jīng)預置了對web的支持，如下圖所示
而我們實際開發(fā)中可能用 react-native-cli腳手架來構建項目比較多些，那么如何引入 react-native-web呢？
我們先初始化項目：
此時我們的項目并不支持在web中使用：
為了項目能在web環(huán)境中運行，我們需要借助今天的主角--react-native-web，有請主角出臺：
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這幾個文件一把 down下來：
curl -L https://gist.github.com/hu-qi/bde8a6d2b45325d93b1665174f938faa/download | tar -xvz --strip-components=1
react-native-web然后在package.json中添加build和web的腳本：
就和 expo-cli 初始化的項目一樣可以執(zhí)行yarn web,這時會在本地8080端口運行一個服務，這時我們分別執(zhí)行yarn ios 和 yarn android就能看到在ios模擬器和Android模擬器中顯示和web端一模一樣的頁面,一次 react-native-web 的多端同構 Hello World 就成功實現(xiàn)了，當然這也意味著我們還可能編譯成小程序，后續(xù)有機會一起探討探討！
此處的注意點：
1.代碼能得以成功拷貝全靠梯子，當然也可以選擇去網(wǎng)頁下載；
2.Android能得以成功運行，全靠給權限sudo 755 android/gradlew;
3.React Native 入口文件需修改為 App.web,不然只有Web端才能讀取App.web.js;
4.適當執(zhí)行./gradlew clean重新yarn android等多年經(jīng)驗積累騷操作排除故障。
關鍵的操作在于那行Copy代碼的命令，那究竟上文中提到到下載了4的文件到底做了啥呢？Copy攻城獅心中也有一個大大的問號，Talk is cheap, show me the code，打開文件看看那些代碼吧！
這與我們移動端的index.js非常相似，不過它還將您的應用程序掛載到根目錄中index.html的div上。
webpack雖然是重點內容，但此處不過過多介紹，請前往官方文檔閱讀更加詳細的內容，此案例中我們用到了三個插件：
o HtmlWebpackPlugin創(chuàng)建HTML；
o HotModuleReplacementPlugin用于熱模塊重裝；
o DefinePlugin定義變量，例如__DEV__或NODE_ENV中react-native-web。
該文件是臨時添加的文件，用于在使用React NativeWeb 同構之前驗證我們的設置是否正常運行。最終，您可以刪除此文件，因為App的入口js文件可以在移動端運行，也能在Web端運行。不過為了處理某些在Web上能運行而在移動端不能運行的業(yè)務，需要將代碼抽離出來存放在`.web.js`為后綴的文件中。
結合上述的簡單案例，在后續(xù)實際業(yè)務中，我們可以逐步嘗試同構業(yè)務到Web并逐步進行驗證。
本文分享自華為云社區(qū)《ReactNative 項目 Web 端同構初探》，原文作者：胡琦。
點擊關注，第一時間了解華為云新鮮技術~
家好，很高興又見面了，我是"高級前端進階"，由我?guī)е蠹乙黄痍P注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發(fā)！
今天給大家?guī)淼闹黝}是 NativeScript 和 React Native 之間的比較，隨著 NativeScript 8.5.4 版本的最新發(fā)布，我覺得是時候跟大家聊聊這個跨平臺原生應用框架了。話不多說，直接進入正題！
使用 JavaScript 構建跨平臺移動應用程序已經(jīng)悄然改變了 JavaScript 開發(fā)人員的默認規(guī)則。 開發(fā)人員不僅可以構建在 Web 上運行的應用程序，還可以構建使用 JavaScript 運行的適用于 Android 和 iOS 的 Native 應用程序。
而隨著 React Native 和 NativeScript 等不同框架的興起，開發(fā)者已經(jīng)可以使用 JavaScript 構建高效、生產(chǎn)就緒且可擴展的移動應用程序。
首先一起來聊聊 NativeScript。NativeScript 的愿景是通過直接使用平臺 API 來解放開發(fā)，而無需使得開發(fā)者放棄對 JavaScript 的熱愛。 在與框架無關的團隊中使用 JavaScript 構建跨平臺移動應用程序時，值得將 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.
因此，無論選擇的 JavaScript 框架是 Vue、React、Svelte、Angular 還是 Vanilla JavaScript，NativeScript 都能滿足開發(fā)者需求。
另一方面，React Native 是 Facebook 創(chuàng)建的一個 JavaScript 庫，它使用 React 構建原生移動應用程序，這意味著開發(fā)者無法使用 Vue、Angular 或任何其他 JavaScript 框架來完成 React Native 的移動應用程序構建。
但是，這并不意味著 App 或 Play 商店上的所有 React Native 應用程序都是使用純 JavaScript 構建的，因為在某些情況下，開發(fā)人員必須使用 Swift/Objective-C 或 Java/Kotlin 編寫 Native 代碼才能訪問默認情況下 JavaScript 不可用的 Native API 。
考慮到這一點，接下來一起看看 React Native 與 NativeScript 之間的比較。
社區(qū)支持是選擇正確框架時要考慮的最重要因素之一，但是令人驚訝的是 NativeScript 比 React Native 存在的時間更長。 NativeScript 的初始版本是在 2014 年，而 React Native 最初版本是在 2015 年 3 月 26 日發(fā)布。
雖然一年的差異似乎是一種優(yōu)勢，但 React Native 的增長和采用率遠高于 NativeScript。 React Native 在 npm 上記錄的每周下載量約為 1632k，而 NativeScript 每周平均下載量大約為 10k。
在貢獻者方面，React Native 在 GitHub 上擁有超過 2,506 名貢獻者，而 NativeScript 有 226 名貢獻者。 NativeScript 被超過 6k 名開發(fā)人員使用，而 React Native 在 GitHub 上超過 1352k 的開發(fā)人員使用。
這一巨大差距展示了開發(fā)者社區(qū)對 React Native 的廣泛采用，并影響了第三方庫的數(shù)量、錯誤修復和 StackOverflow 上的答案。因此，在社區(qū)支持方面，React Native 更受歡迎。
對于剛接觸移動開發(fā)的 Web 開發(fā)人員來說，開始和設置 React Native 項目可能具有挑戰(zhàn)性，當然可以借助于 Expo。Expo 用于構建一個在所有用戶設備上本地運行的 JavaScript/TypeScript 項目。
Build one JavaScript/TypeScript project that runs natively on all your users' devices.
可以通過下面命令快速使用 Expo:
npx create-expo-app my-app雖然 Expo 確實有一些限制，但這些限制不會影響大多數(shù)使用 Expo 構建的應用程序。開發(fā)者還可以使用 Expo Go，Expo Go 是一個免費的開源客戶端，用于在 Android 和 iOS 設備上測試 React Native 應用程序，而無需在本地構建任何東西。它允許開發(fā)者打開通過 Expo CLI 提供的應用程序，并在開發(fā)它們時更快地運行項目。
Expo Go在 Android Play 商店和 iOS App Store 上均可用。
對于具有 React 背景的開發(fā)人員來說，開始使用 React Native 更容易。 但是，如果選擇的主要 JavaScript 是 Angular，那么學習曲線可能會很陡峭。
在引導 NativeScript 應用程序時，使用官方模板開始使用 NativeScript 相當容易。 開發(fā)者可以通過在終端中運行以下命令來初始化帶有側邊抽屜的 NativeScript 應用程序：
ns create myCoolApp --template <template-package-name>
// 直接運行該命令
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
// 使用指定風格的默認模板創(chuàng)建應用程序NativeScript 的優(yōu)點在于它與框架無關，這意味著開發(fā)者可以使用 Angular、Vue、Svelte、React 甚至 Vanilla JavaScript 等 JavaScript 框架使用 NativeScript 構建移動應用程序。
然而，與其他任何框架相比，NativeScript 與 Angular 的同步效果最好，因為 NativeScript 團隊與 Google 合作以確保這兩種工具在構建移動應用程序時能夠無縫工作。
通過使用 NativeScript Playground 應用程序，開發(fā)者可以在物理 Android 和 iOS 設備上運行應用程序，就像 Expo Go 一樣。
總體而言，Expo Go 應用程序提供了比 NativeScript playground 更好的開發(fā)人員體驗，因此對于尋求更簡單設置體驗的開發(fā)人員來說，這是一個加分項。
熱加載功能在移動應用程序開發(fā)中非常重要，因為極大地提高了開發(fā)人員的工作效率。 沒有開發(fā)人員愿意等待超過一分鐘時間來查看在開發(fā)階段注入到移動應用程序中的每個小變化。
在 React Native 0.61 版本中，團隊宣布了一項名為快速刷新的功能。 快速刷新統(tǒng)一了之前 React Native 版本中已經(jīng)存在的實時重新加載功能和熱重新加載功能。
啟用快速刷新后，開發(fā)者可以對應用程序進行更改并幾乎立即看到更改。 默認情況下，此功能會保留功能組件中的本地狀態(tài)，但不會保留類組件中的本地狀態(tài)。
NativeScript 的熱模塊替換 (HMR) 功能在 NativeScript 5.3 中發(fā)布。 它支持 Visual Studio Code 調試，即使 HMR 功能仍在運行，開發(fā)人員也可以使用調試器。
NativeScript 還完全支持 SASS 文件，這意味著當在應用程序中對 .scss 或 .sass 文件進行更改時，會在開發(fā)過程中快速反映在應用程序中。HMR 在從 NativeScript 應用程序目錄中添加或刪除文件時也能起作用。
NativeScript 也支持 .vue 文件中的腳本更改，但是在 Vue 中使用 TypeScript 時它有一個限制，并且在開箱即用的 NativeScript Angular 項目中有完整的 HMR 支持，不需要額外的配置。
HMR 和快速刷新的性能相似，并且都具有巧妙構建的功能，例如在 NativeScript 中調試 Visual Studio Code 和在 React Native 中進行錯誤恢復。
React Native 附帶了一些基本的開箱即用模塊，但在某些情況下，開發(fā)者可能需要 React Native 尚無相應模塊的原生功能。 在這種情況下，則必須編寫 Native 模塊（Native Modules）來與 Native API 進行通信。
實現(xiàn)這一點需要特殊的橋梁，這需要一定程度的 Native 開發(fā)專業(yè)知識。 但是，考慮到 React Native 生態(tài)的規(guī)模，開發(fā)者可能很容易在 GitHub 或 npm 上找到現(xiàn)有的原生模塊。
在 NativeScript 中訪問 Native Platform API 是 NativeScript 最重要的特性。 開發(fā)人員可以從 JavaScript 調用平臺 API，而不是使用 Objective-C 或 Kotlin 編寫本機代碼。
const formatMessage=level=> `The Battery Level is: ${level}%`
// iOS直接原生訪問！
let value=UIDevice.currentDevice.batteryLevel * 100
// Android
let value=bm.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
alert(formatMessage(value))這就是 NativeScript 優(yōu)于 React Native 的地方，因為 JavaScript 開發(fā)人員不需要特定平臺語言的專業(yè)知識即可使用 Native API。
下面是一些 npm 包，其是 NativeScript 開發(fā)的基礎并且很容易理解。
NativeScript 應用程序通常較慢，因為該框架采用單線程方法來訪問本機設備 API。
與 NativeScript 不同，React Native 應用程序使用多線程模型，其中 JavaScript 和應用程序的界面在不同的線程上運行。 因此，在構建性能是關鍵因素的移動應用程序時，React Native 是最佳選擇。
React Native 還提供更快的 UI 渲染，因為它使用虛擬 DOM 來更新應用程序 UI，類似于 React。
NativeScript 的文檔很容易理解，并且有一些關于如何實現(xiàn)動畫、手勢、HTTP 請求和代碼共享等內容的非常棒的插圖。
而且，對于 NativeScript 與 Svelte 和 Vue 的特定用例，有單獨的文檔。 但大多數(shù)時候，開發(fā)人員必須在官方文檔之外了解 NativeScript 生態(tài)系統(tǒng)的工作原理。
React Native 擁有比 NativeScript 更成熟的生態(tài)系統(tǒng)，隨之而來的是對文檔明確的期望，因為跨平臺移動應用程序開發(fā)的初學者和專家都可以訪問它。
然而，雖然文檔通俗易懂，但缺乏細節(jié)，這可能會使初學者不清楚一些概念。
使用 Expo 構建 React Native 應用程序并使用 Expo 文檔簡化了作為初學者構建功能性 React Native 應用程序的 React Native 文檔的使用。
兩者都沒有最好的文檔，使用這兩種框架的開發(fā)人員通常必須超越官方文檔才能了解框架的各個方面。
React Native 目前被 Facebook、Bloomberg、Coinbase、Discord、Tesla 等頂級品牌和公司用于生產(chǎn)。 這證明了 React Native 的規(guī)模和流行程度。
Facebook marketplace 也是用 React Native 構建的，證明如果你有一個用本地語言編寫的現(xiàn)有移動應用程序，你可以逐步采用 React Native 來構建你的移動應用程序的不同部分。
盡管 React Native 在這里成為焦點，但這并不意味著 NativeScript 不能解決 React Native 為使用它的公司所做的業(yè)務問題。 看看這里使用 NativeScript 構建的很棒的應用程序表明它可以構建生產(chǎn)就緒的移動應用程序。
作為 Web 開發(fā)人員使用 JavaScript 構建移動應用程序是一種很棒的體驗，因為該語言在 Web 瀏覽器上運行以構建適用于 Android 和 iOS 的本機應用程序。 在所有用于構建跨平臺應用程序的 JavaScript 框架中，React Native 和 NativeScript 位居榜首。
在這篇文章中，我們介紹了每個框架的獨特之處以及它們的發(fā)展程度。 選擇任一框架最終取決于移動應用程序的要求、性能成本、首選 JavaScript 框架、移動應用程序開發(fā)的先驗知識以及所需的本機 API。
因為篇幅有限，文章并沒有過多展開，如果有興趣，可以在我的主頁繼續(xù)閱讀，同時文末的參考資料提供了大量優(yōu)秀文檔以供學習。最后，歡迎大家點贊、評論、轉發(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
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
