ReactNative 自定义Android原生模块的两种形式

最新推荐文章于 2024-04-30 17:21:51 发布

仲少

最新推荐文章于 2024-04-30 17:21:51 发布

阅读量2.1k

点赞数

分类专栏：青岛的生活文章标签： android模块 android RN ReactNativ 自定义模块

本文链接：https://blog.csdn.net/jing85432373/article/details/72770579

版权

青岛的生活专栏收录该内容

29 篇文章 0 订阅

订阅专栏

ReactNative 自定义Android原生模块的两种形式

1.原生View模块

继承SimpleViewManager<返回View类型>

必须重写`getName()`和`createViewInstance(ThemedReactContext context)`两个方法,在`createViewInstance`中返回原生控件

通过`@ReactProp`注解添加原生属性

通过重写`getExportedCustomDirectEventTypeConstants()`方法进行回调,例如:

@Override
public Map getExportedCustomDirectEventTypeConstants() {
    return MapBuilder.of(
            NavigationStateChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onNavigationStateChange"),
            "onWebScroll123", MapBuilder.of("registrationName", "onWebScroll")

    );
}

将原生模块中的onWebScroll123方法映射为 JS模块的onWebScroll属性,调用方法如下:

假设getName返回值为 “MyView”

<MyView onWebScroll={()=>{}}>

2.原生Class模块

继承ReactContextBaseJavaModule

必须重写`getName()`和构造函数

可以认为这个事一个工具类,提供一些RN没有的原生方法

通过`@ReactMethod`注解添加原生方法,在JS中通过

import {
View,
NativeModules,
NativeAppEventEmitter

} from 'react-native';
const RNVolume = NativeModules.原生中的getName返回值;
RNVolume.注解对应方法名  调用对应方法

3.在原生还可以通过以下方法向Js发送信息

reactContext
            .getJSModule(RCTNativeAppEventEmitter.class)
            .emit(eventName, params);
           //eventName:String JS中通过eventName接收  
           //params:WritableMap 需要传递的参数

在Js通过接收(eventName=”onVolumeChange”)
NativeAppEventEmitter.addListener('onVolumeChange', () => {})