Maison > interface Web > js tutoriel > Explication détaillée du développement natif Android avec React-native

Explication détaillée du développement natif Android avec React-native

小云云
Libérer: 2018-01-17 17:03:13
original
1532 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée du développement natif Android de pontage React-native. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

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, ce n'est que le début. C'est un peu difficile, mais tout est difficile au début Le langage est clair et les principes sont les mêmes.

La fonction de navigation. d'Amap doit être intégré pendant le processus de développement. Si vous n'avez pas trouvé une bonne roue, écrivez simplement du code natif, puis utilisez JS pour appeler le module de navigation natif

Enregistrez d'abord le module<.>

Le sens est d'utiliser la classe Ce n'est qu'après vous être inscrit en RN que 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
parmi lesquels modules.add( new NaviActivity(reactContext)); signifie ajouter un module d'activité natif Android

Ce module peut définir une solution, et RN peut l'appeler 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
L'auteur l'a-t-il compris ? Accédez à d'autres pages, et vous pouvez également effectuer d'autres opérations ici, par exemple, partager directement

et déclarer <. 🎜> dans l'application principale de l'application Android,


Ajoutez le nom du package qui vient d'être enregistré
@Override
  protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
      new AnExampleReactPackage()
   );
  }
Copier après la connexion

JS appelle le code natif


L'auteur a écrit un Untils/CommonAndroidUntils.js ici, et a directement introduit ce fichier js
import { NativeModules } from &#39;react-native&#39;;

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


sur la page qu'il faut utiliser pour réaliser le saut
CommonAndroidUntils.show();
Copier après la connexion

Intégrer la navigation Amap

Pour un novice, c'est un. un peu difficile d'intégrer directement la carte Amap dans Android Studio au début, mais après l'avoir compris, je me sens bien. Décrivez brièvement les problèmes rencontrés, rappelez-vous et aidez les autres

Le package vocal .jar a été glissé directement. ne peut pas être importé

La solution est de cliquer avec le bouton droit sur le package .jar, il y a Cliquez sur l'option pour importer .jar et attendez la synchronisation

Le reste sont des problèmes mineurs. qui peut être facilement résolu sur la base de la démo et de la documentation.


Recommandations associées :


React-Native bibliothèque globale d'outils de commutation multilingue réagissent-native- Explication détaillée d'i18n

Explication détaillée de l'utilisation des accessoires dans React-Native

Introduction au contrôle d'image dans React-native

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