React Native 三端同构实战（4）react-native-web 接入
|
- UID
- 1066743
|
React Native 三端同构实战（4）react-native-web 接入
react-native-web 接入为了给你现有的 ReactNative 接入 react-native-web，实现 ReactNative 三端同构的能力，你需要做以下事情：
- 安装新的依赖，按照依赖的命令如下：
# 运行时依赖
npm i react react-dom react-native-web react-art
# 构建工具
npm i -D webpack webpack-dev-server webpack-cli babel-loader babel-plugin-transform-runtime
|
- 为 Web 平台写一份 webpack 配置文件 webpack.config.js，内容如清单 3 所示: 清单 3. webpack 配置文件 webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| module.exports = {
module: {
rules: [
{
// 支持图片等静态文件的加载
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'file-loader'
}
},
{
// React Native 包中有很多 es6 语法的 js，需要用 babel 转换后才能在浏览器中运行
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: false,
presets: ['react-native'],
plugins: [
// 支持 async/await 语法
'transform-runtime'
]
}
}
}
]
},
resolve: {
// 优先加载以 web.js 结尾的针对 web 平台的文件
extensions: {
'.web.js',
'.js',
'.json',
},
alias: {
// 把 react-native 包映射成 react-native-web
'react-native$': 'react-native-web'
}
}
}
|
- 写一个针对 Web 平台启动入口文件 index.web.js，内容如清单 4 所示： 清单 4. Web 平台启动入口文件 index.web.js
1
2
3
4
5
6
7
8
9
10
11
12
| import { AppRegistry } from 'react-native';
// 注册组件
AppRegistry.registerComponent('App', () => App);
// 启动 App 组件
AppRegistry.runApplication('App', {
// 启动时传给 App 组件的属性
initialProps: {},
// 渲染 App 的 DOM 容器
rootTag: document.getElementById('react-app')
});
|
- 写一个 index.html 文件，引入 webpack 构建出的 JavaScript，以在 Web 平台运行，内容如清单 5 所示：
清单 5. Web 平台启动入口文件 index.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.
0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--以下是正常运行所需的必须样式-->
<style>
html,body,#react-root{
height: 100%;
}
#react-root{
display:flex;
}
</style>
</head>
<body>
<div id="react-root"></div>
<script src="main.js"></script>
</body>
</html>
|
完成以上步骤后重新执行 webpack 构建，再在浏览器中打开 index.html 你就可以看到 React Native 转出的 Web 网页了。
完整的例子可以参考 react-native-web 的 。 |
|
|
|
|
|
