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', () => {})