React Native實現一個自定義模塊

概述

在 前期介紹React Native 項目結構的時候，我們講解過React的項目組成，其中說過 node_modules 文件夾，這是一個存放 node 模塊的地方。我們知道React是用npm來管理項目的。提到npm，一般指兩層含義：一是 Node.js 開放式模塊登記和管理系統，另一種是 Node.js 默認的模塊管理器，是一個命令行軟件，用來安裝和管理 node 模塊。

npm 使用介紹

npm 是一個 Node.js 模塊，安裝 Node.js 會默認安裝 npm，可以在終端中使用以下命令來查看 npm 的版本：

npm -v

升級可以使用下面的命令

sudo npm install npm -g

安裝模塊(安裝完畢後會產生一個node_modules目錄，其目錄下就是安裝的各個node模塊)

npm install <ModuleName>

其他的用法還請參考之前的博客：npm使用詳解
今天我們要說的是用npm來創建一個我們自己的模塊，就是Android的Libary

創建自定義模塊

React Native 雖然實現了很多 Native 組件，並且提供了豐富的 API，但是有些原生庫還是不支持的，而且有很多開源的組件和庫是面向原生的，因此要想在 React Native 中使用這些組件和庫就需要自己定義一個模塊，這樣也方便別人集成，我們還可以把它發到出去供別使用。

首先我們執行init創建一個項目：

react-native init AwesomeProject

這裏以 Android 爲例，用 Android Studio 選擇菜單 File->open 打開 AwesomeProject 文件夾下的 android 文件夾，然後選擇 File -> New -> New Module，選擇創建一個 Android Library，如圖：

然後將所需要依賴的 jar 放到 libs 目錄下，這裏以使用 jpush-sdk 爲例，將官網上下載的 libs 複製到 libs 下，把相關的資源文件放到 res 文件夾下，再把 AndroidManifest 文件內容複製過來，更改一下包名，最後在 build.gradle 中配置一下。

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:+"
}

接下來需要寫 Native 和 JS 交互的代碼，這個可以參考之前的關於原生和js交互的文章點擊打開鏈接。假設我們已經完成了 Native 部分代碼，我們如何才能在 JS 中讓他人能夠通過 import 的方式調用我們的 JS 代碼，從而調用 Native 呢？首先進入 my-react-library 文件夾，然後在終端執行：

npm init

生成 package.json 文件（注意這裏的 name 字段，這裏是別人引用你的模塊的名字），然後再創建一個 index.js 文件，這是 node 模塊的 JS 入口。例如我引用了jpush

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();
    }
｝

發佈自定義模塊

到此爲止，我們已經完成了 React Native 自定義模塊。現在可以發佈我們的自定義模塊了。在 package.json 所在的目錄下執行：

npm publish

這樣就可以把我們的自定義模塊上傳到 npm 庫了，每次更新版本時，需要改動 package.json 中的 version 值，然後再執行 npm publish 即可。

保存自定義模塊

安裝完成後就會把這個模塊保存到 node_modules 文件夾下，由於我們的模塊是一個 Android Library 項目，所以在 Native 中還需要配置一下。我們使用如下命令保存自己的模塊。

npm install my-react-library --save

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(':my-react-library')
}

然後在 settings.gradle 中也要配置一下（這個搞過Android就很熟悉）

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

在 MainActivity 中將自定義的 Package 添加進去（因爲啓動時在這裏觸發的）

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 中添加

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

到此爲止我們完成了 Native 部分的配置（完成後 sync 一下），接下來就可以使用了。

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