[复习] android 原生模块（不带任何参数）

一般封装原生的 module 需要两步，第一步就是 native 层面的，还有就是 js 层面的，如果是 js 层面的不封装那么代码就会没有提示，导致很不友好。

1. 封装 native 端

• 1. 新建一个类继承 ReactContextBaseJavaModule

class TestModule: ReactContextBaseJavaModule() {
    val TAG: String = "吴敬"
    override fun getName(): String = "TestModule"
    @ReactMethod
    fun test() {
        Log.e(TAG, "这是在复习这一块内容")
    }
}

我使用的是 kotlin ，会提示添加 kotlin 的支持，直接点击添加即可；其中重写的 getName 函数是导出的 Module 名称，由于一定要重写。方法 test 如果需要暴露给 react-native ，那么需要添加注解 ReactMethod ，只要添加了这个注解，那么这个方法就会自动暴露出去。

• 2. 新建一个类继承 ReactPackage

class TestPackage: ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> {
        return mutableListOf(TestModule())
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): MutableList<ViewManager<View, ReactShadowNode<*>>> {
        return Collections.emptyList()
    }
}

这里的两个方法分别是 Module 和 UI 的，比如我们的 Image 组件就是 UI 组件，我们是就重写 createNativeModules 方法即可，另外一个方法返回空即可。
下面就需要添加 PackageList 中，在 Application 的类中添加，如果你是 react-native 项目，那么就是在 MainApplication 文件中。

• 3. 添加在 Application 中

package com.testnative;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new CustomToastPackage());
          packages.add(new TestPackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.testnative.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

这样就 ok 了。那么下面就是 js 端的封装了。

2. 封装 js 代码

在 react-native 的代码中，找到一个你觉得合适的文件或者新建一个文件：

import {NativeModules} from 'react-native';

/**
 * @type {{test: Function}}
 */
const TestModule = NativeModules.TestModule;
export default TestModule;

如果需要对参数处理什么的都放在这里，我这里主要就是处理代码提示的问题。