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)

• Brightness （by react-native-device-brightness)
  

• Console

• DeviceInfo (by react-native-device-info)
  

• Geolocation

• Keyboard

• NetInfo

• Orientation

• Permissions (by react-native-permissions)

• State

• StatusBar

• Toast (by dore-toast)

• Vibration

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