电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: React Native 三端同构实战（4）react-native-web 接入 [打印本页]

作者: look_w 时间: 2018-12-7 18:50 标题: 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.html

1
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 的。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)