为了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"
}
}