Dore 混合应用框架 —— 基于 React Native 的混合应用迁移方案

上个周末，在写个人年终总结，有了一点新灵感 —— 实际上是 xxx 的缘由。

在半年前的那篇《咱们是如何将 Cordova 应用嵌入到 React Native 中》中，我介绍了如何将 Cordova 嵌入 React Native 应用中。

考虑到有大量的 Cordova 应用，会在将来迁移到 React Native 中，便写了 Dore。

Dore 是一个使用 React Native 实现的 WebView 容器，能够让你在 WebView 调用 React Native 组件。

其设计初衷：用于迁移 Cordova 的 WebView 应用到 React Native 的 WebView。

固然，仍然有更多的插件在开发之中，为了训练一下我编写原生代码的能力。我将改写一些 Java、Objective-C 的原生代码，将来会考虑使用 Swift。

Dore 使用示例

在 WebView 里，咱们能够直接调用，相似于 cordova.plugins：

DoreClient.lockToLandscape();

DoreClient.setBrightnessLevel(0.2);

DoreClient.isTablet().then(function(data) {

});
复制代码

在 React Native 使用起来也比较简单，在 WebView 的 onMessage 调用 Dore。

onMessage = evt => {
  Dore.handleMessage(evt, this.webView)
};
复制代码

对应的，只须要注入相应的原生模块，就能够调用第三方的原生模块——前提是咱们已经对接了：

Dore.inject([{
  name: 'Toast',
  class: Toast
}
复制代码

当前支持如下的插件：

• BackHandler (Android)
• Badge (by react-native-icon-badge
• Brightness （by react-native-device-brightness)
• Console
• Clipboard
• DatePicker (iOS by react-native-notag-datepicker)
• DeviceInfo (by react-native-device-info)
• Geolocation
• Keyboard
• NetInfo
• Orientation
• Permissions (by react-native-permissions)
• State
• StatusBar
• Toast (by dore-toast)
• Vibration

还有其它插件，等着你来一块儿开发。

项目地址：github.com/phodal/dore