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