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

标题: React Native 三端同构实战（3）reactxp 接入 [打印本页]

作者: look_w 时间: 2018-12-7 18:49 标题: React Native 三端同构实战（3）reactxp 接入

reactxp 接入由于 reactxp 所有暴露的 API 都支持在 Web 平台和 React Native 平台同时正常运行，因此为 reactxp 应用转 Web 的方法非常简单，只需为项目加入 webpack 构建和运行 Web 页面的 index.html 文件。
reactxp 的 webpack 配置文件如清单 1 所示：
清单 1. reactxp 的 webpack 配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  output: {
filename: "bundle.js",
path: __dirname + "/dist"
  },
  resolve: {
// 优先加载 web.js 后缀的文件
extensions: [".web.js", ".ts", ".tsx", ".js"]
  },

  module: {
rules: [
      // 转换 TypeScript 文件
   { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
]
  }
};

再写一个运行 Web 页面的 index.html 文件，内容如清单 2 所示：
清单 2. reactxp 平台启动入口文件 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <style>
html, body, .app-container {
   width: 100%;
   height: 100%;
   padding: 0;
   border: none;
   margin: 0;
}
*:focus {
      outline: 0;
}
  </style>
</head>
<body>
  <div class="app-container"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

完整的例子可以参考 reactxp 的。

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