一步步教你如何创建React Native的原生Android模块

在查阅了官方文档以及大量的翻译还有各种转载文章之后，对RN创建Android原生模块还是云里雾里。
这不在多次实验之后，终于悟通其中的关键，其实非常的简单，这里我进行一个记录提供给各位需要的朋友。

初始化项目

这里就不多说了，我们进行项目初始化完毕后，用Android Studio打开项目中的android目录下的build.gradle文件。如图：

打开项目

创建Module

步骤：

1. 右键app/java/com.projectName，新建Java Class
2. 新建的类继承ReactContextBaseJavaModule，然后补充实现方法（善于利用代码提示与补全
3. 新建一个@ReactMethod方法，用于测试

** 不想太啰嗦，直接录制成了gif给各位看官：**

创建Module

示例代码

package com.mynative;

import android.util.Log;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyModule extends ReactContextBaseJavaModule {
    public MyModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    // 这里返回一个模块名称字符串，便于我们在 js中调用
    @Override
    public String getName() {
        return "MyModule";
    }

    //  创建一个方法
    @ReactMethod
    public void hi(String name) {
        Log.v("ReactNativeJS", name);
    }
}

创建Package

方法同上，我们新建一个名为MyPackage的Java Class，然后利用代码补全与提示把剩下的方法加上，如图：

创建Package

示例代码

package com.mynative;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyPackage implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new MyModule(reactContext));
        return modules;
    }

    @Override
    public List> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

注册模块

到此，我们的模块已经创建完毕，下一步直接在MainApplication中注册即可使用了：

注册模块

调用模块

原生代码编写完毕后，需要重新打包部署app，然后我们在js代码中这么屌用：

import { NativeModules } from 'react-native';

const myModule = NativeModules.MyModule; // 这里的MyModule为我们上边getName函数返回的name

// 调用方法
myModule.hi('react-native!');

总结

这里很多详细的地方没写，因为我觉得没必要，在文档以及其他人的翻译文章中都有说明了。
这里主要就是讲解一些困惑点，比如怎么创建模块、怎么自动填写类方法等。