Come costruire un bridge Android nativo React?

Quando si utilizza React Native per scrivere app mobili, JavaScript è il linguaggio di programmazione principale. Tuttavia, a volte, potresti voler chiamare un'API della piattaforma che non è supportata dal componente React Native esistente o utilizzare una libreria Android di terze parti In questi casi, devi scrivere codice nativo per il bridge utilizzando Android Studio e Xcode. In questo articolo, dimostrerò passo dopo passo come creare un modulo React Native Bridge più semplice.

Requisiti per compilare il pacchetto per ReactNative

  • Android Studio
  • CLI React-Native
  • Nodo

Stiamo creando un bridge / pacchetto per React Native per accedere a Toast (da Android Native) utilizzando JavaScript.

Per creare prima qualsiasi pacchetto dobbiamo impostare la struttura di directory di base, quindi, creiamo la struttura di directory come di seguito

1. Crea directory dei pacchetti:

mkdir reazioni-nativo-android-toast

2. Eseguire il comando seguente per avviare il pacchetto

cd reagire-nativo-android-toast
npm init

Quando esegui npm init ti chiederà del pacchetto. Immettere tutte le informazioni relative al pacchetto e verrà creato il file package.json.

Ora devi creare una directory Android e un file index.js.

  • La directory Android conterrà tutto il codice java / nativo.
  • Il file index.js è il nostro punto di ingresso per il pacchetto come abbiamo menzionato nel file package.json anche questo file crea il ponte tra Javascript e Android.

Una volta che la directory di base è stata configurata ora dobbiamo configurare Android per scrivere codice Java / nativo per creare la struttura di directory Android come di seguito

  • AndroidManifest.xml: il file manifest per un'applicazione Android è un file di risorse che contiene tutti i dettagli necessari al sistema Android sull'applicazione.

ToastModule.java:

  • ToastModule estende la classe ReactContextBaseJavaModule e implementa la funzionalità richiesta da JavaScript.
  • Tutti i metodi React saranno scritti come @ReactMethod, abbiamo creato il metodo show () a cui accediamo dal javascript.
  • Se vuoi creare più metodi possibili, devi solo scrivere @ReactMethod prima della definizione del metodo poiché React capirà che questo metodo verrà invocato dal javascript.

ToastPackage.java

ToastPackage viene utilizzato per registrare il modulo. Basta copiare il codice nel file ToastPackage.java e modificarlo in base alle proprie esigenze.

Index.js

Questo file viene utilizzato per avvolgere il modulo nativo in un modulo JavaScript.

Un NativeModule è una classe Java che di solito estende la classe ReactContextBaseJavaModule e implementa la funzionalità richiesta da JavaScript.

Questo è fondamentalmente usato per chiamare il nostro modulo dal javascript.

Finora abbiamo installato con successo il bridge di comunicazione Android e JavaScript.

Come usare questo pacchetto nel nostro progetto?

Creare un progetto nativo di React: init-native init Esempio

Poiché tutti i moduli Node devono essere installati in {progetto React Native} \ node_modules \.

Basta aggiungere il nome della directory del pacchetto nel file package.json del progetto React Native e nel percorso del pacchetto ed eseguire il comando seguente da utilizzare nel progetto.

npm install
collegamento di reazione nativo

Il comando React-native link collegherà il tuo pacchetto al tuo progetto e sarai pronto ad accedere al toast da JavaScript.

Ora importa quel pacchetto nel tuo file JS dove vuoi mostrare il brindisi nel tuo progetto.

Qui stiamo chiamando il metodo nativo da ReactNative

ToastModule.show ("Hello World");

Questo è tutto! Esegui il tuo progetto e usa toast ovunque nel tuo progetto.

In BoTree, sviluppiamo applicazioni Web e mobili per aggiungere valore all'attività dei nostri clienti. Ci allineiamo per garantire che i nostri clienti traggano il massimo beneficio dal nostro impegno. Mandaci una riga per discutere su come possiamo aiutarti a portare la tua attività al livello successivo.

Mandaci un messaggio. Parla con noi