React-native 移动端与Web端融合

为了React-native在Web端调试和实践三端"Write once"的可能，我采用taobaoFED的React-Web做了一些融合实践，实现了将React-native 项目运行在Web浏览器上。

• 环境： MacOS，node v6.7.0

• 首先全局React-web的cli命令:

npm install react-web-cli -g

• 这里以新建的项目为例：

react-web init <项目名>

它会npm install相关库，并生成webpack.config.js。

这里注意，如果是init出来的项目，react和react-native 的版本可能为15.4.2，即现在react和react-native的最新版本。那么要将react和react-native的版本降低如15.3.2，不然会有一系列的问题。

• 完成后我们新建入口文件，index.web.js或者index.android.js都行，然后在webpack.config.js中配置入口：

var config = {
  paths: {
    src: path.join(ROOT_PATH, '.'),
    index: path.join(ROOT_PATH, 'index.web'),//or 'index.android'
  },
};

• 然后在index.web.js或者index.android.js中加入react-native代码。最后我们需要将react-native 的virtual dom展示的UI放在Web端的DOM树中：

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

• 如果使用了flex布局，遇到web浏览器上显示的布局有问题，需要考虑一下兼容问题。

• 现在的react-web目测还没有兼容到最新的react版本：15.4.2，附上成功项目的配置版本，可以解决很多编译问题：

package.json:

{
  "name": "xxx",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "antd-mobile": "^0.9.17",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-native": "^0.41.2",
    "react-web": "0.4.6"
  },
  "devDependencies": {
    "babel-loader": "^6.2.5",
    "babel-plugin-import": "^1.1.1",
    "babel-preset-react-native": "^1.9.0",
    "babel-preset-stage-1": "^6.16.0",
    "haste-resolver-webpack-plugin": "^0.2.2",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1",
    "webpack-html-plugin": "^0.1.1"
  }
}