ReactNative-Android插件

一、编写插件

android项目包目录下创建ToastModule.java并继承ReactContextBaseJavaModule
实现构造函数接收NAContext
重写getName方法返回模块名称
重写getConstants方法导出js使用常量
定义模块功能方法并使用@ReactMethod注解当前方法

package com.awesomeproject;

import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

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

import java.util.HashMap;
import java.util.Map;

//1
public class ToastModule extends ReactContextBaseJavaModule {

    private static ReactApplicationContext reactContext;

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    //2
    public ToastModule(@NonNull ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    //3
    @NonNull
    @Override
    public String getName() {
        return "ToastExample";
    }

    //4
    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    //5
    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

二、注册插件

android项目包目录下创建CustomToastPackage.java并继承ReactPackage
重写createNativeModules方法添加模块,以便js调用
在MainApplication.java的getPackages方法中添加新插件注册

package com.awesomeproject;

import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;
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 CustomToastPackage implements ReactPackage {
    @NonNull

回调使用

import com.facebook.react.bridge.Callback;

Callback.invoke(a+b);

Promises

使用await调用配置了promise的方法并配以async

import com.facebook.react.bridge.Promise;

promise.resolve(map);

promise.reject(E_LAYOUT_ERROR, e);

js调用测试

export default class HelloWorldApp extends Component {
  handleClick(e) {
    ToastExample.show('hello app', ToastExample.SHORT);
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Button
          onPress={this.handleClick}
          title="Test Toast"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}