三步將 React Native 項目運行在 Web 瀏覽器上面

AppRegistry.registerComponent('Awes', () => Awes);
if (Platform.OS == 'web') {
  var app = document.createElement('div');
  document.body.appendChild(app);
  AppRegistry.runApplication('Awes', {
    rootTag: app
  });
}

react-web bundle

</div>

打包完成后，文件會存放在 web/output/ 目錄下面，可以直接打開 index.html （如果 app 有請求操作，需要起本地服務器查看），再檢查一下就可以發布了。

這個過程中發生了什么？

好奇的同學看到這里可能會有一些疑問，上面命令行工具的一些命令做了什么事情？為什么 React web 將 React Native 代碼打包出一份用在 Web 端的代碼？React web 安全可靠嗎，里面都是什么東西？

這里簡單的介紹下 React web 的實現原理和上面步驟實際做的事情。

React Web 將 React Native 組件做了 Web 端的實現

React 將代碼與平臺環境分離，多了一層，這樣開發者可以在平臺環境層面做一些處理，使得同樣一份代碼適應更多的平臺環境等。

• 比如 react-canvas 按照 React 的語法書寫代碼，在平臺環境層面做一些處理（將你 React 代碼運行并用 canvas 渲染），然后實現特定目標（在移動端提高性能）。
• React Native 中，一份代碼能同時跑在 iOS 和 Android 上面，也是一樣的道理。React Native 團隊在對應平臺的 Native app 上面做了一些處理，使其可以解析執行 React 語法的代碼。
• 還有同構（isomorphic）的應用，服務器端使用 React + Node.js 生成 HTML，客戶端使用 React 獲取進行客戶端相關交互和功能，也是一樣的道理。

為此， React v0.14.x 版本開始，專門分成兩個庫 react 和 react-dom ，其實是把對瀏覽器平臺的特殊處理剝離了出來，單獨變成了 react-dom 庫。

React Native 比較特殊的地方在于，組件最底層的實現是 Native 的實現，所以就不支持 span 、 div 等標簽。而動畫等，也是直接調用 Native 進行界面渲染。所以不支持 Web 端，但是絕大部分組件，都是可以用 Web 技術進行模擬實現。動畫可以用 CSS3 、基礎元素可以用同等 HTML 標簽模擬、布局以及兼容性問題可以用 CSS 來處理，所以 React web 只需要把 React Native 的組件用 Web 技術重新實現一遍，借助 React 這一層，即可實現一份代碼運行在多個平臺上面。

舉一個非常簡單的例子， Text 組件：

• React Native 的實現 是調用了很多 React Native 底層的代碼實現的。
• 對于 Web 端，輸出一行文本使用 <span> 標簽即可，所以 React web 的實現 就直接搞一個 <span> 標簽，綁一些事件什么的就 OK 了。

在 UI Explorer demo 中能跑起來的 React Native 組件，你都可以放心的用。

webpack 幫你切換打包目標

做出了兼容 Web 端的組件，那打包的時候豈不是要把所有要打包的組件中的 require('react-native') 全部更換成 require('react-web') ？不然怎么用的我的 Web 組件打包？

強大的 webpack 附帶了 alias 配置項可以幫你解決這個問題：

resolve: {
 alias: {
 'react-native': 'react-web',
 'ReactNativeART': 'react-art',
 },
  extensions: ['', '.js', '.jsx'],
},

var Text = require('ReactText');

var {Text} = require('react-native');