前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ReactNative-Android插件

ReactNative-Android插件

作者头像
前端小鑫同学
发布2022-12-24 10:46:01
3290
发布2022-12-24 10:46:01
举报

ReactNative-Android插件

一、编写插件
  1. android项目包目录下创建ToastModule.java并继承ReactContextBaseJavaModule
  2. 实现构造函数接收NAContext
  3. 重写getName方法返回模块名称
  4. 重写getConstants方法导出js使用常量
  5. 定义模块功能方法并使用@ReactMethod注解当前方法
代码语言:javascript
复制
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();
    }
}
二、注册插件
  1. android项目包目录下创建CustomToastPackage.java并继承ReactPackage
  2. 重写createNativeModules方法添加模块,以便js调用
  3. 在MainApplication.java的getPackages方法中添加新插件注册
代码语言:javascript
复制
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
回调使用
代码语言:javascript
复制
import com.facebook.react.bridge.Callback;

Callback.invoke(a+b);
Promises

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

代码语言:javascript
复制
import com.facebook.react.bridge.Promise;

promise.resolve(map);

promise.reject(E_LAYOUT_ERROR, e);
js调用测试
代码语言:javascript
复制
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>
    );
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ReactNative-Android插件
    • 一、编写插件
      • 二、注册插件
        • 回调使用
          • Promises
            • js调用测试
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档