react native 原生模块桥接的简单说明小结

2023-08-28 13:13:05 169

Android

创建原生模块包

通过继承ReactPackage为你的原生模块包创建Java类，可以这么写：
覆盖createNativeModules和createViewManagers方法

publicclassMyNativePackageimplementsReactPackage{
@Override
publicListcreateNativeModules(ReactApplicationContextreactContext){
}

@Override
publicListcreateViewManagers(ReactApplicationContextreactContext){
}
}

在createNativeModules方法中添加原生模块

publicListcreateNativeModules(ReactApplicationContextreactContext){
Listmodules=newArrayList<>();
modules.add(newMyNativeModule(reactContext));

returnmodules;
}

在createViewManagers方法中添加原生UI组件

publicListcreateViewManagers(ReactApplicationContextreactContext){
Listcomponents=newArrayList<>();
components.add(newRNNativeComponent());

returncomponents;
}

创建原生模块

先通过继承ReactContextBaseJavaModule创建MyNativeModule类。

publicclassMyNativeModuleextendsReactContextBaseJavaModule{
publicMyNativeModule(ReactApplicationContextreactContext){
super(reactContext);
}
}

为了让ReactNative在NativeModules中找到我们的模块，我们还需要覆盖getName方法。

@Override
publicStringgetName(){
return"MyNativeModule";
}

现在我们已经拥有一个可以导入到JavaScript代码的原生模块，现在可以向其中加入功能。

暴露模块方法：定义一个接受设置参数、成功回调和失败回调的Show方法。

publicclassMyNativeModuleextendsReactContextBaseJavaModule{
@ReactMethod
publicvoidShow(ReadableMapconfig,CallbacksuccessCallback,CallbackcancelCallback){
ActivitycurrentActivity=getCurrentActivity();

if(currentActivity==null){
cancelCallback.invoke("Activitydoesn'texist");
return;
}
}
}

在JavaScript中调用模块方法

import{NativeModules}from'react-native'

const{MyNativeModule}=NativeModules

MyNativeModule.Show(
{},//ConfigParameters
()=>{},//SuccessCallback
()=>{}//CancelCallback
)

注意:

模块方法只提供静态引用，不包含于react树中。

创建原生UI组件

如果你需要在react树中渲染一个原声UI组件

创建一个继承ReactNativeViewGroupManager的Java类

publicclassRNNativeComponentextendsViewGroupManager{
publicstaticfinalStringREACT_CLASS="RNNativeComponent";
}

覆盖getName方法：

@Override
publicStringgetName(){
returnREACT_CLASS;
}

覆盖createViewInstance方法，返回你的自定义原生组件

@Override
protectedFrameLayoutcreateViewInstance(finalThemedReactContextreactContext){
return//用FrameLayout包裹的自定义原生组件
}

创建原生prop方法

@ReactProp(name="prop_name")
publicvoidsetPropName(NativeComponentnativeComponent,propDataTypeprop){
}

JavaScript中使用

import{requireNativeComponent}from"react-native"

constMyNativeComponent=requireNativeComponent("RNNativeComponent",RNNativeComponent,{
nativeOnly:{}
})

iOS

Macro

RCTBridgeModule:RCTBridgeModule是一个protocol，它为注册bridge模块RCTBridgeModule@protocolRCTBridgeModule提供了一个接口
RCT_EXPORT_MODULE(js_name):在classimplementation时使用bridge注册你的模块。参数js_name是可选的，用作JS模块的名称，若不定义，将会默认使用Objective-C的class名
RCT_EXPORT_METHOD(method)RCT_REMAP_METHOD(,method):bridge模块亦可定义方法，这些方法可以作为NativeModules.ModuleName.methodName输出到JavaScript。

RCT_EXPORT_METHOD(funcName:(NSString*)onlyString
secondName:(NSInteger)argInteger)
{...}

上面的例子暴露到JavaScript是NativeModules.ModuleName.funcName

创建原生模块包

我们需要在项目中添加两个文件：头文件和源文件。

-MyNativePackage.h

#import"RCTBridgeModule.h"

@interfaceMyNativePackage:NSObject
@end

-MyNativePackage.m

#import"MyNativePackage.h"

@implementationMyNativePackage

RCT_EXPORT_MODULE();

@end

创建模块方法

RCT_EXPORT_METHOD(Show:(RCTResponseSenderBlock)callback){
}

JavaScript中引入模块方法

import{NativeModules}from'react-native'

constMyNativeModule=NativeModules.MyNativeModule
MyNativeModule.Show(()=>{})

创建原生View组件

创建view方法，返回你的原声组件

-(UIView*)view{
//Initialize&returnyournativecomponentview
}

创建原生prop方法

RCT_CUSTOM_VIEW_PROPERTY(prop,DATA_TYPE_OF_PROP,YOUR_NATIVE_COMPONENT_CLASS){
}

在JavaScript中使用

import{requireNativeComponent}from"react-native"

constMyNativeComponent=requireNativeComponent("RNNativeComponent",RNNativeComponent,{
nativeOnly:{}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

react native 原生模块桥接的简单说明小结

热门推荐

随机推荐