Dore 混合應用框架 —— 基於 React Native 的混合應用遷移方案

Phodal發表於2019-02-28
框架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

相關文章