摘要：儘管 React Native 已經進入開源的第 6 個年頭，距離發佈 1.0 版本依舊是遙遙無期。“Learn once, write anywhere”,完全不影響 React Native 淪爲“不會 JavaScript 也能用”的框架，那如何將在 React Native 項目中引入 react-native-web 呢？
react-native-web 簡介
倉庫地址： https://github.com/necolas/react-native-web
react-native-web 是由 前 Twitter 現 Facebook 工程師 Nicolas Gallagher 實現並維護的開源項目，是一個使 React Native 組件和 API 能運行在 Web 上的庫，其和 React Native Windows, React Native macOS 等庫將 React Native 拓展到一個又一個新的平臺。目前推特、expo、大聯盟足球、Flipkart、優步、《泰晤士報》、DataCamp 以及我們小作坊都在生產中使用了 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再適配實現一遍，使其在Web上的行爲和在原生應用上儘量保持一致，從文檔中提到的 Alert 和 Setting 模塊以及其對應的源碼中大概能感受到一二，比如TextInput:
switch (keyboardType) { case 'email-address': type = 'email'; break; case 'number-pad': case 'numeric': inputMode = 'numeric'; break; case 'decimal-pad': inputMode = 'decimal'; break; case 'phone-pad': type = 'tel'; break; case 'search': case 'web-search': type = 'search'; break; case 'url': type = 'url'; break; default: type = 'text'; } if (secureTextEntry) { type = 'password'; }
因此也借鑑了 React Native 的一些代碼，作爲適配的依據。
如果您想基於 React Native 實現多端統一化方案，可參考去哪兒前端團隊的實現方案：跨端開發, 倉庫地址：https://github.com/qunarcorp/qrn-remax-unir
添加到React Native項目
一般來說新建 React Native 項目時可以選用 expo-cli 或者 react-native-cli 來創建。expo-cli 中已經預置了對web的支持，如下圖所示.
而我們實際開發中可能用 react-native-cli腳手架來構建項目比較多些，那麼如何引入 react-native-web呢？
我們先初始化項目：
npx react-native init rn_web
# 當然也可以使用模板，如
# npx react-native init rn_web --template react-native-template-typescript
此時我們的項目並不支持在web中使用：
爲了項目能在web環境中運行，我們需要藉助今天的主角--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的腳本：
"build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js", "web": "webpack serve --mode=development --config webpack.config.js"
就和 expo-cli 初始化的項目一樣可以執行yarn web,這時會在本地8080端口運行一個服務，這時我們分別執行yarn ios 和 yarn android就能看到在ios模擬器和Android模擬器中顯示和web端一模一樣的頁面,一次 react-native-web 的多端同構 Hello World 就成功實現了，當然這也意味着我們還可能編譯成小程序，後續有機會一起探討探討！
此處的注意點：
- 代碼能得以成功拷貝全靠梯子，當然也可以選擇去網頁下載；
- Android能得以成功運行，全靠給權限sudo 755 android/gradlew;
- React Native 入口文件需修改爲 App.web,不然只有Web端才能讀取App.web.js;
- 適當執行./gradlew clean重新yarn android等多年經驗積累騷操作排除故障.
探究代碼
關鍵的操作在於那行Copy代碼的命令，那究竟上文中提到到下載了4的文件到底做了啥呢？Copy攻城獅心中也有一個大大的問號，Talk is cheap, show me the code，打開文件看看那些代碼吧！
常見的單頁面應用入口，像下面代碼中的 div 我們稱其爲“根” DOM節點，因爲其中的所有內容都將由React DOM進行管理。在當前案例中，我們只是設置一些基本樣式以使主體div具有完整的高度和寬度:
<html>
...
...
<body>
<div id =“ app-root”> </ div>
</ body>
</ html>
使用index.web.js可以在Web和移動端之間區分開來，通過.web.js擴展名可以使該文件僅在Web上使用,其他一些可用的擴展如.native.js、.ios.js和.android.js適用於移動端。當然，如果您希望將本不同端的代碼都保存在一個index.js文件中，則可以使用import { Platform } from 'react-native'來按照條件區分不同平臺的代碼。可以參考React Native官方文檔中有關平臺特定代碼的更多信息。
index.web.js： ... ... AppRegistry.runApplication（appName，{ initialProps：{}， rootTag：document.getElementById（'app-root'）， }）;
這與我們移動端的index.js非常相似，不過它還將您的應用程序掛載到根目錄中index.html的div上。
webpack雖然是重點內容，但此處不過過多介紹，請前往官方文檔閱讀更加詳細的內容，此案例中我們用到了三個插件：
- HtmlWebpackPlugin創建HTML；
- HotModuleReplacementPlugin用於熱模塊重裝；
- DefinePlugin定義變量，例如__DEV__或NODE_ENV中react-native-web。
該文件是臨時添加的文件，用於在使用React Native Web 同構之前驗證我們的設置是否正常運行。最終，您可以刪除此文件，因爲App的入口js文件可以在移動端運行，也能在Web端運行。不過爲了處理某些在Web上能運行而在移動端不能運行的業務，需要將代碼抽離出來存放在`.web.js`爲後綴的文件中。
後記
結合上述的簡單案例，在後續實際業務中，我們可以逐步嘗試同構業務到Web並逐步進行驗證。
本文分享自華爲雲社區《React Native 項目 Web 端同構初探》，原文作者：胡琦。