Maison > interface Web > js tutoriel > Comment implémenter le pontage React-native Android et quelles sont les étapes spécifiques ?

Comment implémenter le pontage React-native Android et quelles sont les étapes spécifiques ?

亚连
Libérer: 2018-06-11 16:29:46
original
2296 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée du développement natif Android de pontage React-native. Maintenant, je le partage avec vous et le donne comme référence.

Dans le long voyage de développement de RN, il faudra tôt ou tard entrer en contact avec le développement natif d'Android. L'auteur présentera les hauts et les bas. Pour un novice qui ne comprend pas Android, cela. C'est un peu difficile au début. Mais tout est difficile au début. Le langage doit être compris, et le principe est le même

Pendant le processus de développement, nous. Il faut intégrer la fonction de navigation d'Amap, mais nous n'en avons pas trouvé une bonne. Pour la roue, écrivez simplement le code natif, puis utilisez JS pour appeler le module de navigation natif

Inscrivez-vous d'abord. le module

Le sens est d'enregistrer la classe sur RN , vous pouvez utiliser JS pour appeler

public class AnExampleReactPackage implements ReactPackage {
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new NaviActivity(reactContext));
    return modules;
  }
}
Copier après la connexion

où modules.add(new NaviActivity(reactContext)); est d'ajouter un module d'activité natif Android

Ce module peut définir la solution, RN Il peut être appelé directement (@ReactMethod doit être déclaré sur la méthode)

@ReactMethod
  public void showFengMap(String mapID){
    Activity currentActivity = getCurrentActivity();
    Intent intent = new Intent(currentActivity, 页面名.class);
    currentActivity.startActivity(intent);
  }
Copier après la connexion

Ce que veut l'auteur à faire est de passer à d'autres pages. Vous pouvez également effectuer d'autres opérations ici Par exemple, partager directement

Déclaration

Dans l'application principale de l'application Android,

@Override
  protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
      new AnExampleReactPackage()
   );
  }
Copier après la connexion

ajouter le nom du package qui vient d'être enregistré

JS appelle le code natif

import { NativeModules } from &#39;react-native&#39;;

export default NativeModules.NaviActivity;
Copier après la connexion

L'auteur a écrit un Untils/CommonAndroidUntils.js ici , et introduisez directement ce fichier js dans la page qui doit être utilisé

CommonAndroidUntils.show();
Copier après la connexion

pour réaliser le transfert de saut.

Intégration de la navigation Amap

Pour un novice, c'est un peu difficile d'intégrer directement Amap map dans android studio au début Mais après l'avoir compris, ça fait du bien. Décrivez brièvement les problèmes rencontrés, rappelez-vous et aidez les autres

<.>Le package vocal .jar glissé directement ne peut pas être importé

La solution consiste à cliquer avec le bouton droit sur le package .jar, à cliquer sur l'option pour importer .jar et à attendre la synchronisation

<.>Le reste sont des problèmes mineurs qui peuvent être facilement résolus sur la base de la démo et de la documentation.

Ce qui précède, c'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Comment utiliser le didacticiel d'installation et de configuration de Babel

Comment configurer le fichier de configuration Babel dans vue-cli

Utilisez node.js pour implémenter la fonction de saisie automatique des enveloppes rouges de Douyin

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal