Dore
Dore is a WebView container implemented using React Native. Help you migrate Cordova application to React Native WebView.
Dore 是一个使用 React Native 实现的 WebView 容器,可以让你在 WebView 调用 React Native 组件。
设计初衷:作为迁移 Cordova 的 WebView 应用到 React Native 的 WebView 的基础设施。
Feel free to give a pull request or issues, questions.
欢迎使用 Dore,如果你在过程中遇到问题,可以与我们联系。
Demo (Ionic v1 + Angular + React Native + Dore) : see in examples
Screenshots:
Workflow:
微信群:
Features
Support:
- AppAvailability (react-native-check-app-install)
- AppState
- AsyncStorage
- BackHandler (Android)
- Badge (by react-native-icon-badge
- Brightness (by react-native-device-brightness)
- Console
- Calender (by react-native-calendar-events)
- Clipboard
- DatePicker (iOS by react-native-notag-datepicker)
- DeviceInfo (by react-native-device-info)
- Flashlight (react-native-torch)
- Geolocation
- Keyboard
- NetInfo
- Orientation
- Permissions (by react-native-permissions)
- ScreenShot (by react-native-view-shot)
- Shake (by react-native-shake-event)
- SMS (by react-native-sms)
- SQLite (Test Only,react-native-sqlite-storage
- StatusBar
- Toast (by dore-toast)
- Vibration
Deprecated
Those plugins just list, don't plan to implement in Dore.
UI
- ActionSheet (https://github.com/EddyVerbruggen/cordova-plugin-actionsheet)
- Camera
- Dialog (https://github.com/apache/cordova-plugin-dialogs)
- Feedback (https://github.com/EddyVerbruggen/nativescript-feedback)
- QRCode
- Share (https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin)
no-to-works
- BluetoothSerial (https://github.com/don/BluetoothSerial)
- BLE (https://github.com/don/cordova-plugin-ble-central)
- fs
- NFC
- Push Notifications (https://github.com/zo0r/react-native-push-notification)
- TTS (https://github.com/naoufal/react-native-speech)
- Wechat (RN)
- Weibo (RN)
Example
see in examples
1.Import to your React-Native WebView
...;;; ; ... { super ... Dore } { Dore }; { if thisstateisLoading thiswebView; }; { ... return <View> <WebView ... onMessage=thisonMessage /> </View> }
2.import DoreClient, e.x:
3.use in WebView
DoreClient
APIs
AppAvailability
function | return type | return |
---|---|---|
isAppInstalled | promise | string |
isAppInstalledAndroid | promise | string |
checkURLScheme | promise | string |
install:
yarn add react-native-check-app-install
react-native link
inject:
; Dore;
examples:
DoreClient
App State
state value: active
, background
, inactive
DoreClient;$ionicPlatform;
AsyncSTORAGE
function | return type | return |
---|---|---|
setAsyncStorage | - | - |
getAsyncStorage | promise | string |
$scope { DoreClient;}; $scope { DoreClient};
Back( Android Only)
example:
$ionicPlatform;
Badge
function | return type | return |
---|---|---|
setBadge | - | - |
getBadge | promise | { badge: 'xx' } |
clearBadge | - | - |
$scope { DoreClient};$scope { DoreClient;};$scope { DoreClient;};
Brightness
function | return type | return |
---|---|---|
getBrightnessLevel | promise | float |
setBrightnessLevel | - | - |
$scope { DoreClient};$scope { DoreClient;};
Calendar
function | return type | return |
---|---|---|
calendarAuthorizationStatus | promise | String |
requestCalendarAuthorize | - | - |
findEventById | promise | json |
fetchAllCalendar | promise | json |
saveCalendar | promise | json |
removeCalendar | promise | json |
findCalendars | promise | json |
install
yarn add react-native-calendar-events
react-native link react-native-calendar-events
inject
import RNCalendarEvents from 'react-native-calendar-events';
Dore.inject([{
name: 'Calendar',
class: RNCalendarEvents
}]);
examples:
permissions action:
DoreClient.calendarAuthorizationStatus().then(function (response) {
$scope.authStatus = response;
$scope.$apply();
});
DoreClient.requestCalendarAuthorize();
calendar actions:
$scope.saveCalendar = function () {
DoreClient.saveCalendar("title",
{
location: 'location',
notes: 'notes',
startDate: new Date().toISOString(),
endDate: new Date().toISOString()
}).then(function(response){
console.log(response);
})
};
$scope.findCalendars = function () {
DoreClient.findCalendars().then(function(response){
console.log(response);
$scope.calendars = response;
$scope.$apply();
})
};
$scope.fetchAllCalendar = function () {
DoreClient.fetchAllCalendar('2017-12-26T19:26:00.000Z',
'2018-01-1T19:26:00.000Z', ['1', '2']).then(function(response){
console.log(response);
$scope.fetchCalendars = response;
$scope.$apply();
})
};
$scope.removeFirstCalendar = function () {
DoreClient.fetchAllCalendar('2017-12-26T19:26:00.000Z',
'2018-01-1T19:26:00.000Z', ['1', '2']).then(function(response){
console.log(response);
if (response.length < 1) {
return DoreClient.showToast("请先创建日历");
}
var lastCalendar = response[0];
DoreClient.removeCalendar(lastCalendar.id)
})
};
$scope.findEventById = function () {
DoreClient.findEventById("297D3B27-4070-49A4-8BF9-1E7631727B4A").then(function(response){
console.log(response);
$scope.savedCalendar = response;
$scope.$apply();
})
};
Clipboard
function | return type | return |
---|---|---|
copy | - | |
paste | event | window.event |
copy:
DoreClient;
paste:
$ionicPlatform;DoreClient;
MDN Console)
Console (send WebView console to React Native
$scopeconsole = console; // can use inline console function after register$scope { var someObject = str: "Some text" id: 5; console;};$scope { var car = "Dodge Charger"; var someObject = str: "Some text" id: 5; var optionalParams = car ". The object is:" someObject; console;};$scope { for var i = 0; i < 5; i++ var optionalParams = "Bob" i + 1; console; };$scope { var optionalParams = "color: yellow; font-style: italic; background-color: blue;padding: 2px"; console;};$scope { console; console; console; console; console; console; console; console; console; console;};$scope { console; ; console;};$scope { { { console; } ; } ;};
DatePicker
function | return type | return |
---|---|---|
showDatePicker | promise | { date: 'xx' } |
var options = date: '2017-10-22 12:12:12' maxDate: '2022-10-22 12:12:12';DoreClient;
DeviceInfo
function | return type | return |
---|---|---|
getAppVersion | promise | { version: 'xx' } |
getUniqueID | promise | { uniqueID: 'xx' } |
getBrand | promise | { brand: 'xx' } |
getModel | promise | { model: 'xx' } |
getSystemName | promise | { systemName: 'xx' } |
isEmulator | promise | boolean |
isTablet | promise | boolean |
examples:
$scope { DoreClient;};$scope { DoreClient;};
Flashlight
function | return type | return |
---|---|---|
onFlashlight | - | - |
offFlashlight | - | - |
inject
; Dore;
usage
$scope { DoreClient;};$scope { DoreClient;}
Geolocation
function | return type | return |
---|---|---|
getCurrentPosition | promise | json |
watchPosition | event | event |
clearWatch | - | - |
stopObserving | - | - |
$scope { DoreClient;}; $scope { $ionicPlatform; DoreClient;}; $scope { DoreClient;};$scope { DoreClient;};
Keyboard
function | return type | return |
---|---|---|
hideKeyboard | - | - |
DoreClient;
NetInfo
function | return type | return |
---|---|---|
getConnectionInfo | promise | json |
addNetInfoEventListener | event | event |
removeNetInfoEventListener | - | - |
$scope { DoreClient;};$scope { $ionicPlatform; DoreClient;};$scope { DoreClient;};
Orientation
function | return type | return |
---|---|---|
getOrientation | promise | string |
lockToLandscape | - | - |
lockToPortrait | - | - |
$scope { DoreClient;};$scope { DoreClient;};$scope { DoreClient;};
Permissions
function | return type | return |
---|---|---|
checkPermissions | promise | JSON |
requestPermissions | promise | JSON |
checkMultiple | promise | JSON |
$scope { DoreClient};$scope { DoreClient};$scope { DoreClient};
Screenshot
function | return type | return |
---|---|---|
captureScreen | string | URI |
install:
yarn add react-native-view-shot
react-native link react-native-view-shot
inject:
; Dore;
Usage
DoreClient
SMS
function | return type | return |
---|---|---|
sendSMS | event | event |
Install:
yarn add react-native-sms
react-native link react-native-sms
Inject
; Dore;
Examples:
$scope { DoreClient;}
StatusBar
function | return type | return |
---|---|---|
hideStatusBar | - | - |
showStatusBar | - | - |
DoreClient;DoreClient;
Shake
function | return type | return |
---|---|---|
addShakeListener | event | - |
removeShakeListener | - | - |
$ionicPlatform;DoreClient;
Done:
DoreClient;
Toast
function | return type | return |
---|---|---|
show | - | - |
DoreClient.showToast(String, duration: short | long , position: 'center' | 'top')
DoreClient; DoreClient;
Vibration
function | return type | return |
---|---|---|
vibrate | - | - |
show | - | - |
DoreClient; DoreClient;
SQLite(Test functional)
{} {} var SQLite = DoreClientSQLite; SQLite };
Development
Workflow: DoreClient:Browser -> vibrationVibrate -> DoreClient -> window.postMessage -> RN
DoreClient, handle message in WebView
Browser
$scope { DoreClient;};
DoreClient
{ { var message = JSON; window; }} DoreClient = { return ; }
Workflow: Dore: WebView -> onMessage -> Dore -> xxxBridge -> Native
Dore, handle message in React Native
WebView
{ Dore};
Dore
Dore { const action = eventDataaction; }
Bridge
; let { if payloadtype === 'VIBRATE' if !payloadoptions return Vibration // is duration is fixed time (about 500ms) if Number || payloaddurationlength > 0 return Vibration else if payloadtype === 'CANCEL' Vibration; };
License
© 2017 A Phodal Huang's Idea. This code is distributed under the MIT license. See LICENSE
in this directory.