Comment écrire des modules personnalisés dans React Native

Avant-propos

Vous pouvez voir le dossier node_modules dans le projet React Native, où sont stockés les modules de nœuds. Le gestionnaire de packages Node.js npm est le plus grand écosystème de bibliothèques open source au monde. Lorsqu'il s'agit de npm, il fait généralement référence à deux significations : l'une est le système ouvert d'enregistrement et de gestion des modules Node.js, et l'autre est le gestionnaire de modules par défaut de Node.js, qui est un logiciel en ligne de commande utilisé pour installer et gérer les nœuds. modules. Cet article vise à explorer comment écrire un module npm personnalisé (similaire à un plug-in) dans React Native et le télécharger sur npm pour que d'autres puissent l'utiliser.

Introduction à l'utilisation de npm

npm est un module Node.js. L'installation de Node.js installera npm par défaut. Vous pouvez utiliser la commande suivante dans le terminal pour vérifier la version de npm :

npm -v

Mise à niveau de npm :

sudo npm install npm -g

Installer les modules (une fois l'installation terminée, un répertoire node_modules sera généré, sous lequel se trouvent les modules de nœuds installés) :

npm install <ModuleName>

Afficher la configuration npm :

npm config list

Configurer le proxy :

//设置 http 代理
npm config set proxy http://server:port
//设置 https 代理
npm config set https-proxy http://server:port

Ce qui précède présente quelques commandes npm de base, puis vous pouvez créer un module localement.
Ouvrez d'abord un terminal et créez un nouveau dossier dans lequel vous souhaitez créer un module personnalisé, puis connectez-vous à npm sur la ligne de commande. Entrez la commande suivante :

npm adduser

Vous serez invité à saisir votre nom d'utilisateur, votre mot de passe et votre adresse e-mail. Une fois terminé, vous pouvez saisir la commande suivante pour afficher l'utilisateur npm actuel :

npm whoami

.

Si le nom d'utilisateur que vous venez d'enregistrer s'affiche correctement, la connexion est réussie. Utilisez ensuite la commande suivante pour créer le module npm :

npm init

Après avoir exécuté la commande ci-dessus, vous serez guidé pour créer un fichier package.json, comprenant le nom, la version, les informations sur l'auteur, etc.

Créer un module

Je voudrais mentionner ici pourquoi vous devriez écrire un module personnalisé. Parce que bien que React Native implémente de nombreux composants natifs et fournisse des API riches, certaines bibliothèques natives ne sont toujours pas prises en charge, et il existe de nombreux composants et bibliothèques open source orientés natifs, donc si vous souhaitez utiliser ces composants et bibliothèques dans React Native, La bibliothèque doit définir un module par elle-même, afin qu'il puisse être facilement intégré par d'autres. Ensuite, nous passons directement au sujet. Écrivez un module personnalisé qui peut être utilisé dans React Native. Exécutez

react-native init AwesomeProject

dans la ligne de commande pour initialiser un projet React Native. Ici, nous prenons Android comme exemple. Utilisez Android Studio pour sélectionner le menu Fichier->ouvrir pour ouvrir le dossier Android sous le dossier AwesomeProject, puis sélectionnez Fichier -> Nouveau -> comme le montre la figure :

Comme le montre l'image, un nouveau module Bibliothèque est créé ici. Ensuite, cliquez sur Terminer pour voir la structure de répertoires suivante :

<.>

Ensuite, ajoutez tous les fichiers Jar dépendants dans le répertoire libs. Ici, nous utilisons jpush-sdk comme exemple. Copiez les bibliothèques téléchargées depuis le site officiel dans libs, placez les fichiers de ressources pertinents dans le dossier res, puis. copiez le contenu du fichier AndroidManifest. Changez le nom du package, et enfin configurez-le dans build.gradle, comme suit (notez ici que vous devez changer la targetSdkVersion en 22, car l'exécution sur 23 peut provoquer un crash) :

apply plugin: 'com.android.library'
android {    
  compileSdkVersion 23    
  buildToolsVersion "23.0.2"    
  defaultConfig {        
    minSdkVersion 16        
    targetSdkVersion 22        
    versionCode 1        
    versionName "1.0"        
    manifestPlaceholders = [                
      JPUSH_APPKEY: "yourAppKey",  //在此修改JPush的AppKey                    
      APP_CHANNEL: "developer-default"      //应用渠道号        
    ]    
  }    
  lintOptions {        
    abortOnError false        
    warning 'InvalidPackage'    
  }    
  sourceSets {        
    main {            
      jniLibs.srcDirs = ['libs']        
    }    
}
}
repositories {    
  mavenCentral()
}

dependencies {    
  compile fileTree(dir: 'libs', include: ['*.jar'])    
  compile "com.facebook.react:react-native:+"
}

Ça y est, nous La première étape est terminée. Ensuite, vous devez écrire le code pour l'interaction entre Native et JS. Vous pouvez vous référer aux parties de JS appelant Native et Native appelant JS dans mon article. . Je n'entrerai pas dans les détails ici. En supposant que nous avons terminé la partie native du code, comment pouvons-nous permettre à d'autres d'appeler notre code JS via l'importation dans JS, appelant ainsi Native ? Entrez d'abord dans le dossier my-react-library, puis exécutez

npm init

dans le terminal pour générer le fichier package.json (notez le champ de nom ici, c'est le nom du module auquel les autres font référence vous), puis créez un fichier index.js est l'entrée JS du module de nœud. Il est recommandé d'utiliser Sublime Text pour écrire du JS. Voici jpush-react-native à titre d'exemple :

jpush-react-native/index.js Une partie du code

import {NativeModules, Platform, DeviceEventEmitter} from 'react-native';

// 通过 NativeModules 找到我们在 Native 定义的 JPushModule 类
const JPushModule = NativeModules.JPushModule;

export default class JPush {

    /**
     * Android only
     * 初始化JPush 必须先初始化才能执行其他操作
    */
    static initPush() {
        JPushModule.initPush();
    }
｝

Ce qui précède définit un initPush method, initPush En fait, la méthode initPush définie dans JPushModule est appelée. D'autres méthodes sont essentiellement similaires à celle-ci, les méthodes fournies par Native sont appelées via NativeModules.

## Publier
À ce stade, nous avons terminé le module personnalisé React Native. Il est maintenant temps de publier notre module personnalisé. Exécutez

npm publish

dans le répertoire où se trouve package.json pour télécharger notre module personnalisé dans la bibliothèque npm. Chaque fois que vous mettez à jour la version, vous devez modifier la valeur de la version dans package.json, puis exécuter npm submit.

Utilisez

dans le répertoire React Native, exécutez :

npm install my-react-library --save

Une fois l'installation terminée, ce module sera enregistré dans le dossier node_modules, puisque notre module est Il s'agit d'un projet de bibliothèque Android, il doit donc encore être configuré en natif. L'essentiel est d'ajouter des dépendances au projet :

le projet réactif natif de quelqu'un/un module/build.gradle

dependencies {    
  compile fileTree(dir: "libs", include: ["*.jar"])    
  compile "com.android.support:appcompat-v7:23.0.1"    
  compile "com.facebook.react:react-native:+"  // From node_modules   
  // 在 dependecies 中加入自定义模块 
  compile project(':my-react-library')
}

Ensuite, configurez-le également dans settings.gradle :

le projet/settings.gradle natif de quelqu'un

include ':app', ':my-react-library'
project(':my-react-library').projectDir = new File(rootProject.projectDir, '../node_modules/my-react-library/android')

在 MainActivity 中将自定义的 Package 添加进去：

MainActivity.java

...
mReactInstanceManager = ReactInstanceManager.builder()                
.setApplication(getApplication())                
.setBundleAssetName("index.android.bundle")                
.setJSMainModuleName("react-native-android/index.android")                
.addPackage(new MainReactPackage())
//添加自定义的 package
.addPackage(new MyReactPackage())
...

如果是 RN 0.29.0 以上版本，则应在 MainApplication 中添加：

MainApplication.java

@Overrideprotected List<ReactPackage> getPackages() {    
return Arrays.<ReactPackage>asList(            
    new MainReactPackage(),            
    new MyReactPackage()    
  );
}

到此为止我们完成了 Native 部分的配置（完成后 sync 一下），接下来就可以使用了。
别人要使用我们的模块时，就可以这样写：

someone.js

//这里的 'my-react-library'是在 package.json 定义的 name
// 这样就可以
import MyModule from 'my-react-library'

export default class SomeClass  extends React.Component {
    componentDidMount() {
      // 调用 index.js 中定义的 doSomething()
      MyModule.doSomething();
    }
｝

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!