React Native でカスタムモジュールを作成する方法-htmlチュートリアル-php.cn

まえがき

React Native プロジェクトには、node_modules フォルダーがあり、Node.js パッケージマネージャー npm は世界最大のオープンソースライブラリエコシステムです。 npm に関しては、通常 2 つの意味を指します。1 つは Node.js オープンモジュールの登録および管理システムで、もう 1 つは Node.js のデフォルトモジュールマネージャーであり、ノードのインストールと管理に使用されるコマンドラインソフトウェアです。モジュール。この記事の目的は、React Native でカスタム npm モジュール (プラグインに似た) を作成し、他の人が使用できるようにそれを npm にアップロードする方法を探ることです。

npm の使い方の紹介

npm は Node.js モジュールです。Node.js をインストールすると、デフォルトで npm がインストールされます。npm のバージョンを確認するには、ターミナルで次のコマンドを使用します:

npm -v

ログイン後にコピー

npm のアップグレード:

sudo npm install npm -g

ログイン後にコピー

モジュールのインストール (インストール完了後、node_modules ディレクトリが生成され、その下にインストールされたノードモジュールが配置されます):

npm install <ModuleName>

ログイン後にコピー

npm 構成の表示:

npm config list

ログイン後にコピー

エージェントのセットアップ:

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

ログイン後にコピー

上記では、いくつかの基本的な npm コマンドを紹介しています。それからそれらをローカルに作成できます。これはモジュールです。
まずターミナルを開いてカスタムモジュールを作成する新しいフォルダーを作成し、コマンドラインでnpmにログインします。次のコマンドを入力します:

npm adduser

ログイン後にコピー

ユーザー名、パスワード、および電子メールアドレスを入力するように求められます。完了したら、次のコマンドを入力して現在の npm ユーザーを表示できます:

npm whoami

ログイン後にコピー

登録したユーザー名が正しく表示されている場合。、ログインが成功したことを示してください。次に、次のコマンドを使用して npm モジュールを作成します:

npm init

ログイン後にコピー

上記のコマンドを実行すると、名前、バージョン、作成者情報などを含む package.json ファイルを作成するように指示されます。

モジュールを作成する

ここで、カスタムモジュールを作成する必要がある理由について説明したいと思います。 React Native は多くのネイティブコンポーネントを実装し、豊富な API を提供しますが、一部のネイティブライブラリはまだサポートされておらず、ネイティブ指向のオープンソースコンポーネントやライブラリが多数あるため、これらのコンポーネントやライブラリを React Native で使用したい場合は、ライブラリは、他の人が簡単に統合できるように、独自にモジュールを定義する必要があります。次に、本題に直接進みます。 React Native で使用できるカスタムモジュールを作成します。コマンドラインで

react-native init AwesomeProject

ログイン後にコピー

を実行して、React Native プロジェクトを初期化します。ここでは Android を例に挙げて、[ファイル] -> [開く] メニューを選択し、[ファイル] -> [新規] -> [新しいモジュール] を選択します。図に示すように:
React Native でカスタムモジュールを作成する方法
図に示すように、ここで新しいライブラリモジュールが作成され、[完了] をクリックして次のディレクトリ構造を確認します。

React Native でカスタムモジュールを作成する方法

次に、必要な jar を libs ディレクトリに置きます。 jpush-sdkを使用します。例えば、公式サイトからダウンロードしたlibsをlibsにコピーし、関連するリソースファイルをresフォルダーに置き、AndroidManifestファイルの内容をコピーし、パッケージ名を変更し、最後にbuild.gradleで設定します。、次のようになります (ここで targetSdkVersion を 22 に変更することに注意してください。23 で実行するとクラッシュする可能性があります):

apply plugin: &#39;com.android.library&#39;
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 &#39;InvalidPackage&#39;    
  }    
  sourceSets {        
    main {            
      jniLibs.srcDirs = [&#39;libs&#39;]        
    }    
}
}
repositories {    
  mavenCentral()
}

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

ログイン後にコピー

ここまでで、最初のステップが完了しました。次に、Native と JS の間の対話のためのコードを記述する必要があります。この記事では、JS が Native を呼び出し、Native が JS を呼び出すため、ここでは詳しく説明しません。コードのネイティブ部分が完了したと仮定すると、JS でのインポートを通じて他の人が JS コードを呼び出すことができ、それによってネイティブを呼び出すことができるようにするにはどうすればよいでしょうか?まず my-react-library フォルダーに入り、ターミナルで

npm init

ログイン後にコピー

を実行して package.json ファイルを生成し (ここの名前フィールドに注意してください。ここには他の人が参照したモジュールの名前があります)、インデックスを作成します。 js ファイル、これはノードモジュールの JS エントリです。JS を記述するには Sublime Text を使用することをお勧めします。例として jpush-react-native を示します。

jpush-react-native/index.js コードの一部

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

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

export default class JPush {

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

ログイン後にコピー

は、実際には JPushModule で定義された initPush メソッドを呼び出します。これも同様で、基本的に NativeModules を通じて Native によって提供されるメソッドを呼び出します。
## 公開
この時点で、React Native カスタムモジュールが完成しました。次に、カスタムモジュールを公開します。 package.json が配置されているディレクトリで

npm publish

ログイン後にコピー

を実行して、カスタムモジュールを npm ライブラリにアップロードします。バージョンを更新するたびに、package.json のバージョン値を変更してから、npm public を実行する必要があります。

使用

React Native ディレクトリで、次のコマンドを実行します。

npm install my-react-library --save

ログイン後にコピー

インストールが完了すると、モジュールは Android ライブラリプロジェクトであるため、Native で構成する必要があります。主なことは、プロジェクトの依存関係を追加することです:

someone's react-native project/some 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(&#39;:my-react-library&#39;)
}

ログイン後にコピー

次に、settings.gradle で設定します:

someone's react-native project/settings.gradle

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

ログイン後にコピー

在 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

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

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

ログイン後にコピー

以上がReact Native でカスタムモジュールを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。