mirror of
https://github.com/danielsogl/awesome-cordova-plugins.git
synced 2025-01-19 00:12:53 +08:00
docs(README): Add Ionic React and Capacitor usage instructions
This commit is contained in:
parent
47b85a80a9
commit
3e78462163
47
README.md
47
README.md
@ -6,6 +6,10 @@ Ionic Native is a curated set of wrappers for Cordova plugins that make adding a
|
||||
|
||||
Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.
|
||||
|
||||
## Capacitor Support
|
||||
|
||||
In addition to Cordova, Ionic Native also works with [Capacitor](https://capacitor.ionicframework.com), Ionic's official native runtime. Basic usage below. For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
|
||||
|
||||
## Installation
|
||||
|
||||
Run following command to install Ionic Native in your project.
|
||||
@ -76,6 +80,49 @@ export class MyComponent {
|
||||
}
|
||||
```
|
||||
|
||||
#### Ionic/React apps
|
||||
|
||||
React apps must use Capacitor to build native mobile apps. However, Ionic Native (and therefore, Cordova plugins) can still be used.
|
||||
|
||||
```bash
|
||||
# Install Core library (once per project)
|
||||
npm install @ionic-native/core
|
||||
|
||||
# Install Ionic Native TypeScript wrapper
|
||||
npm install @ionic-native/barcode-scanner
|
||||
|
||||
# Install Cordova plugin
|
||||
npm install phonegap-plugin-barcodescanner
|
||||
|
||||
# Update native platform project(s) to include newly added plugin
|
||||
ionic cap sync
|
||||
```
|
||||
|
||||
Import the plugin object then use its static methods:
|
||||
|
||||
```typescript
|
||||
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
|
||||
|
||||
const Tab1: React.FC = () => {
|
||||
const openScanner = async () => {
|
||||
const data = await BarcodeScanner.scan();
|
||||
console.log(`Barcode data: ${data.text}`);
|
||||
};
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Tab 1</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
<IonButton onClick={openScanner}>Scan barcode</IonButton>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
#### ES2015+/TypeScript
|
||||
These modules can work in any ES2015+/TypeScript app (including Angular/Ionic apps). To use any plugin, import the class from the appropriate package, and use it's static methods.
|
||||
```js
|
||||
|
Loading…
Reference in New Issue
Block a user