1.背景
随着對使用者體驗要求的提高，産品要求提升使用者體驗，多端體驗一緻。随着多端相同的業務也越來越多，需要投入IOS，Android，Web多端開發人員。這就迫切的需要一種一次開發同時使用在Android ，IOS ，Web的解決方案。達到降本增效的目的。在幾個小業面嘗試，總結經驗後，我們采用react-native-web多端适配。
2.問題
a.對使用者體驗要求越來越高，主推RN，flutter逐漸替代原始H5。
b.現RN代碼獨立在汽車之家APP和二手車之家APP獨立運作，在H5環境運作還沒嘗試。
c.對RN接觸較多較熟悉,對VUE等開發Html語言了解不多。
d.RN原生依賴的處理，大部分頁面vue開發，如何挂載rn-web産物
3.解決方案
react-native-web走進了我們的視線，簡單介紹下rn-web，facebook公司維護的開源項目，一個能使 react-native元件能運作到web的庫。
4.說幹就幹
► a.搭建rn-web環境
npx react-native init rnweb064 --version 0.64.2
注:為什麼選這個版本，因為主軟體現在是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開發多件套，做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環境搭建到這裡已完成，遇到各種環境報錯不再列舉，現已可以運作出demo ，大部分文章到這就結束了。
但我們需要解決的問題幾乎是沒有提到的
1.如何調試log輸出；
2.如何內建在其他Html内，并進行互相通信；
3.react-native內建了原生橋接如何分離；
4.多端業務代碼如何管理
接下來開始我們的src裡編碼，并附上我們解決上述問題的方案
需要注意
1.在webpack.config.js引入src檔案夾，讓rn-web可編譯
2.index.html隻是我們一個殼，我們并不直接使用，是以可以增加背景調試工具VConsole等
► b.rn編碼這裡簡單的介紹一個輸入框在H5的樣式
二手車APP（ios，android）；汽車之家（ios，android）；
具體實作，如何做到多端共用一套業務代碼。
頁面構成分析
1.輸入框
2.listview
3.圖檔
4.鍵盤處理
5.網絡請求
6.通知選擇回調
7.傳回按鈕
8.公共工具類（劉海屏判斷等）
上述大體分為三個部分
1.react-native預設支援（1，2，3，4）
這部分我們無需處理，rn-web預設支援。
2.主軟體獨立封裝（5，6，7）
我們采用同類名，同方法名，區分端，空實作，保證業務代碼在不同平台使用不同實作
業務入口-分端處理index.web.js和index.js分别持有下列入口
H5的入口 app.web.js
APP的入口 app.js
► a.網絡請求
H5 我們采用fetch實作
在APP端采用原生橋接的網絡庫實作
► b.通知實作
APP端同理使用現有封裝實作AHRNEventDispatcher不多介紹
h5頁面我們采用了同類名，空實作，保證編譯正常。
現在我們能運作一套業務代碼在不同的環境了，其他UI差異如何處理。
1.業務判斷Platform.OS != 'web'
2.增加字尾如上圖，讓reactnative可選擇編譯。
► c.關于回調及H5裝載
rn-web打包後就是個js檔案，可直接放到現有任何js檔案中。注意需要放
入口。
這個js隻是我們h5的一個頁面，其他頁面采用vue開發，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目錄結構
共享業務代碼HomeW，不同業務封裝Util，主軟體的reactnative-lib封裝usedcar-web-lib
► d.關于業務代碼如何共同管理，我們采用git子子產品進行管理。
總結
本文這個業務比較簡單，但也夠說出關鍵思想，上述隻有幾處依賴原生代碼，并進行了依賴改動
現有ReactNative已依賴大量原生橋接實作，這個修改是漫長的，但為了體驗這是值得的。
在後續業務中，我們将繼續同構業務到rn-web進行驗證。
上述功能已在H5拍品直供，APP上門試駕釋出。
作者簡介
賈錫瑞
■ 二手車事業部-技術部。
■ 加入汽車之家多年，一直從事研發工作，現負責二手車之家以及其他汽車之家二手車業務的相關研發工作。
來源:微信公衆号:之家技術
出處:https://mp.weixin.qq.com/s/Aeg4C7hEkc4hriwXUsZeaQ