React Native创建原生模块

最新推荐文章于 2024-08-23 08:07:22 发布

寒江蓑笠

最新推荐文章于 2024-08-23 08:07:22 发布

阅读量2k

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/heqiangflytosky/article/details/59047432

版权

本文介绍了如何在React Native中创建原生模块，包括实现模块、注册模块、添加模块和封装模块的步骤。详细讲解了参数类型、导出常量、回调函数、发送事件到JavaScript、Promise等特性的使用，帮助开发者实现对Android原生功能的调用和封装。

摘要由CSDN通过智能技术生成

我的博客原文地址
在React Native开发过程中，有时候我们可能需要访问平台的API，但React Native还没有相应的实现，或者是React Native还不支持一些原生的属性，我们需要调用原生代码来实现，或者是我们需要复用一些原来的Java代码，这个时候我们就需要创建一个原生模块来自己实现对我们需要功能的封装。

可以参考官方文档或中文文档。

开发模块

实现模块

下面我们就通过实现一个自定义模块，来熟悉编写原生模块需要用的一些知识。该模块主要实现调用一些Android原生的功能，比如弹Toast，启动Activity等。
我们首先来创建一个原生模块。一个原生模块是一个继承了 ReactContextBaseJavaModule 的Java类，它有一个必须实现的方法getName()，它返回一个字符串名字，在JS中我们就使用这个名字调用这个模块；还有构造函数NativeModule。
然后在这个类里面实现我们需要实现的方法：


public class MyNativeModule extends ReactContextBaseJavaModule {
   
    private final static String MODULE_NAME = "MyNativeModule";
    private static final  String TestEvent = "TestEvent";
    private ReactApplicationContext mContext;
    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @Override
    public String getName() {
        return MODULE_NAME;
    }

    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put("SHORT", Toast.LENGTH_SHORT);
        constants.put("LONG", Toast.LENGTH_LONG);
        constants.put("NATIVE_MODULE_NAME", MODULE_NAME);
        constants.put(TestEvent, TestEvent);
        return constants;
    }

    @ReactMethod
    public void startActivity(){
        Intent intent = new Intent(mContext,SecondActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        mContext.startActivity(intent);
    }

    @ReactMethod
    public void showToast(String msg,