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

标题: React Native 三端同构实战（5） [打印本页]

作者: look_w 时间: 2018-12-7 18:52 标题: React Native 三端同构实战（5）

适配自定义的 Native ModulesReact Native 开发的 App 中经常会出现 React Native 官方提供的 Native Modules
够用的情况，这时你会在项目中开发自己的 Native Modules，然后在 JavaScript 中去调用自己的 Native Modules。这在 ReactNative 环境下运行没有问题，但转成 Web 后执行时会报错说 Native Modules 上找不到对应的模块，这时因为在浏览器环境下是不存在这些自定义的 Native Modules。为了让页面能正常在浏览器中运行，需要为 Web 平台也实现一份自定义的 Native Modules，实现方法可以在 Web 平台的执行入口的最开头注入以下 polyfill，内容如清单 6 所示：
清单 6. NativeModules polyfill.js

1
2
3
4

import { NativeModules } from 'react-native';
import MyModule from './MyModule'; // 实现自定义 Native Modules 的地方

NativeModules.MyModule = MyModule; // 挂载 MyModule

这段代码的作用是把针对 Web 平台编写的自定义原生模块挂载到 Native Modules 对象上成为其属性，以让 JavaScript 代码在访问自定义 Native Modules 时访问到针对 Web 平台编写模块。
编写特定平台的代码为了让 React Native 三端同构能正常的运行，在有些情况下你不得不编写平台特定的代码，因为有些代码只能在特定平台下才能运行，编写特定的 Web 平台代码有以下三种方法：

ReactNative.Platform.OS：所有端的代码都在一个文件中，通过以下代码来写 Web 平台专属代码:
import { Platform } from 'react-native';

if(Platform.OS==='web'){
// web 平台专属代码
}
process.env.platform：通过 webpack 注入的环境变量来区分:
if (process.env.platform === 'web') {
  // web 平台专属代码
}

这段代码只会在 Web 平台下被打包进去，这和 ReactNative.Platform 的区别是：后者的代码会打包进所有的平台。
要使用这种方法需要你在 webpack.config.js 文件中注入环境变量：

plugins: [
new webpack.DefinePlugin({
      'process.env': {
         platform: JSON.stringify(platform),
         __DEV__: mode === 'development'
}),
]
.web.js: 在 Web 模式下会优先加载 .web.js 文件，当 .web.js 文件不存在时才使用 .js 文件。

总结React Native 三端同构在理论上虽然可行，并且有现成的方案，但实践是还是会遇到一些问题，例如：

在 Web 平台运行出的样式和 React Native 平台不一致，针对这种情况一般是 react-native-web 库的适配问题，可以在 Github 上提 issue 或 Pull Request。
有些 React Native 提供的 API 在 Web 平台不可能实现适配，例如调摄像头、振动等，对于这种问题可以在 Web 平台裁剪掉这些功能或使用其他交互方式替代。

React Native 三端同构虽然无法实现 100% 和 React Native 环境运行一致，但能快速简单的转换大多数场景，以低成本的方式为你的项目带来收益。

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