ReactNative-Android 插件

2022-10-13
北京
本文字数：1548 字
阅读完需：约 5 分钟

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

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;
//1public 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>    );  }}