При работе с 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, которые можно перевести для использования в реакции, но я решил добавить тот, который просто основан на реакции с самого начала.

Код этой статьи здесь