При работе с Ionic Capacitor рекомендуется использовать Capacitor Plugins, иногда вам нужно использовать плагин Cordova или ionic-native для выполнения работы. В приведенном ниже примере мы показываем быстрый вариант использования Ionic Native FileTransfer Plugin.
Основная командная строка для запуска вашего приложения
npm install -g @ionic/cli
ionic start myApp blank --type react
Остальное займет некоторое время
Aarons-iMac:reactjs aaronksaunders$ ionic start myAppEmpty blank --type react
✔ Preparing directory ./myAppEmpty - done!
✔ Downloading and extracting blank starter - done!
? Integrate your new app with Capacitor to target native iOS and Android? Yes
> ionic integrations enable capacitor --quiet -- myAppEmpty io.ionic.starter
> npm i --save -E @capacitor/core
npm notice created a lockfile as package-lock.json. You should commit this file.
+ @capacitor/[email protected]
added 2 packages from 2 contributors and audited 2 packages in 0.979s
found 0 vulnerabilities
> npm i -D -E @capacitor/cli
+ @capacitor/[email protected]
added 56 packages from 90 contributors and audited 87 packages in 10.059s
found 0 vulnerabilities
> capacitor init myAppEmpty io.ionic.starter --web-dir build --npm-client npm
🎉 Your Capacitor project is ready to go! 🎉
Add platforms using "npx cap add":
npx cap add android
npx cap add ios
npx cap add electron
Follow the Developer Workflow guide to get building:
https://capacitor.ionicframework.com/docs/basics/workflow
[OK] Integration capacitor added!
Для начала убедитесь, что вы правильно устанавливаете необходимые плагины.
npm install cordova-plugin-file-transfer
npm install @ionic-native/file-transfer
npm install cordova-plugin-file
npm install @ionic-native/file
npm install @ionic-native/core
В свой код вы импортируете необходимые библиотеки
import {
FileTransfer,
FileUploadOptions,
FileTransferObject
} from "@ionic-native/file-transfer";
import { File } from "@ionic-native/file";
import { Capacitor } from '@capacitor/core';
Наконец, при доступе к объектам большинство из них теперь имеют метод create
, который существует, например, для создания объекта передачи файлов.
let fileTransfer = FileTransfer.create();
Итак, собрав все вместе, вы получите функциональный компонент, который выглядит примерно так, как основная функция для загрузки изображения.
Существуют потенциальные проблемы с правами доступа при доступе к URL-адресу изображения для рендеринга, поэтому мы преобразуем его с помощью функции convertFileSrc
, которая доступна как часть @capacitor/core
, поэтому обязательно импортируйте ее.
const [theImage, setImage] = React.useState<string|undefined>();
const download = () => {
console.log("download");
let fileTransfer = FileTransfer.create();
const url = "https://www.postfun.com/wp-content/uploads/2019/09/Hickory-horned-devil-82819.jpg";
fileTransfer.download(url, File.tempDirectory + "file.jpg", true).then(
async entry => {
console.log("download complete: " + entry.toURL());
// need to convert url so you don't get permission errors...
setImage(Capacitor.convertFileSrc(File.tempDirectory + "file.jpg"))
},
error => {
// handle error
console.log("error", error);
}
);
};
раздел рендеринга компонента, где при нажатии кнопки загрузки мы вызываем функцию download
.
Мы используем тег IonImg
для рендеринга фактического изображения и IonLabel
для отображения локального пути.
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Capacitor React</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonToolbar>
<h2>FileTransfer Plugin Test</h2>
</IonToolbar>
<IonImg src={theImage}></IonImg>
<IonItem className="ion-text-wrap">
<IonLabel>{theImage}</IonLabel>
</IonItem>
<div>
<IonButton onClick={() => download()}>DOWNLOAD</IonButton>
</div>
</IonContent>
</IonPage>
);
Поскольку я использую IOS, чтобы запустить приложение конденсатора в симуляторе…
ionic build <- only needed first time
ionic cap sync ios
ionic cap open ios
Если вы видите эту ошибку на IOS
*** NSForwarding: warning: object 0x7fff89115030 of class
'PFEmbeddedMulticasterImplementation' does not implement
doesNotRecognizeSelector: -- abort
Затем вам нужно будет обновить конденсатор до последней версии.
npm install @capacitor/ios@next
Вывод
В этом посте я рассмотрел использование reactjs, Ionic Capacitor и плагинов Cordova. Есть много примеров использования углового кода с Ionic Native, которые можно перевести для использования в реакции, но я решил добавить тот, который просто основан на реакции с самого начала.
Код этой статьи здесь