Как использовать ионные нативные плагины в мобильном приложении React Compacitor

При работе с Ионный конденсатор Рекомендуется использовать Плагины конденсатора Иногда вам нужно использовать плагин Cordova или Ionic-Con-Contact, чтобы выполнить задание. В приведенном ниже примере мы показываем быстрый случай использования Ионный нативный плагин FileTransfer Анкет

Базовая командная строка, чтобы запустить ваше приложение

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/core@1.5.1
added 2 packages from 2 contributors and audited 2 packages in 0.979s
found 0 vulnerabilities

> npm i -D -E @capacitor/cli
+ @capacitor/cli@1.5.1
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';

Наконец, при доступе к объектам большинство из них теперь имеют Создать Метод, который существует, например, создание объекта передачи файла.

let fileTransfer = FileTransfer.create();

Таким образом, создавая все это вместе, вы получаете функциональный компонент, который выглядит примерно как это как основная функция для загрузки изображения.

При доступе к URL -адресу изображения возникают потенциальные проблемы с разрешением, поэтому мы преобразуем его, используя функцию ConvertFilesrc который доступен как часть @Конденсатор/ядро Так что обязательно импортируйте его.

  const [theImage, setImage] = React.useState();

  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);
      }
    );
  };

Раздел рендеринга компонента, где на событии нажатия кнопки загрузки мы называем Скачать функция

Мы используем Ionimg Теги, чтобы отобразить фактическое изображение и Ionlabel Чтобы отобразить локальный путь

return (
  
    
      
        Capacitor React
      
    
    
      
        FileTransfer Plugin Test
      
      
      
        {theImage}
      
      
         download()}>DOWNLOAD
      
    
  
);

Так как я использую 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 и с ионным конденсатором и плагинами Cordova. Есть много примеров, использующих угловой код с ионным уроженцем, которые могут быть переведены на использование в React, но я подумал, что добавлю тот, который только основан на React с самого начала

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

Оригинал: “https://dev.to/ionic/how-to-use-ionic-native-plugins-in-react-capacitor-mobile-application-fg7”

FileTransfer Plugin Test

Вывод

Читайте ещё по теме: