ReactNative与原生的交互

本文详细介绍React Native项目中第三方库的安装与卸载方法,并深入探讨RN与原生代码间的交互过程,包括通过Manager类建立桥梁、实现方法调用及事件监听等核心功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

RN项目引用三方:
RN三方库需要npm 导入
这里是官网地址:
添加库:
进入RN项目根目录:
输入命令:npm install “第三方库” –save 如:npm install react-native-swiper –save
删除库:
如果没有–save只是删除库,不会删除依赖
输入命令 npm uninstall “第三方库” –save [npm uninstall react-native-toast –save]

RN项目与原生交互:
首先建立Manager管理类并引入如下文件

#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher>
#import <React/RCTEventEmitter >
解释下这几个头文件:
RCTEventDispatcher(事件调度器)
RCTBridge (桥接)
RCTBridgeModule (桥接模块)需要循序协议如:

@interface XXXXManger : NSObject
RCTEventEmitter (RCT的事件源)
Log就不用说了

XXXXManger.m中添加RCT_EXPORT_MODULE()宏,来 实现RCTBridgeModule协议。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定,默认就会使用这个Objective-C类的名字。
RCT_EXPORT_METHOD 支持所有标准JSON类型,包括:
string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array (NSArray) 包含本列表中任意类型
object (NSDictionary) 包含string类型的键和本列表中任意类型的值
function (RCTResponseSenderBlock)

如何提供方法供调用?我给点实际的代码以简单的版本号为例代码如下:
OC代码接口提供:
RCT_EXPORT_METHOD(getSVersion:(RCTResponseSenderBlock)callBack){
      NSString *build = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleVersion"];
      callBack(@[[NSNull null],build]);
}

Javascript里可以这样调用这个方法:
import { NativeModules } from ‘react-native’;
var XXXXManger = NativeModules. XXXXManger;
XXXXManger.getSVersion((error,events) =>{
console.log(‘error’, error);
console.log(‘events’, events);
});
有些人自然要问反过来OC调用RN如何实现?
OC调用RN就简单了通知:
[self.bridge.eventDispatcher sendAppEventWithName:@”didReceiveNotification” body:userInfo];
是很不是很熟悉? 跟iOS的Notification太像了
sendAppEventWithName:@”didReceiveNotification” body:userInfo
postNotificationName:@”hidenTabbar” object:body
这里没什么说的我们继续
另外sendAppEventWithName已经过期但还能使用,现在需要将OC调用RN与RN调用CO分开处理上述方法可用一个Manager管理现在分开,自定义类并继承 RCTEventEmitter.h( #import )遵循RCTBridgeModule协议
然后要导出你所有的方法名字
-(NSArray *)supportedEvents
{
return @[@”isCallback”, @”xxxx”, @”xxxxxx”];//有几个就写几个
实现你导出的所有方法,里面都使用 sendEventWithName 方法即可

-(void)iseCallback:(NSString*)code result:(NSString*) result {
[self sendEventWithName:@”iseCallback”
body:@{
@”code”: code,
@”result”: result, }];
继续使用sendAppEventWithName:会警告
‘sendDeviceEventWithName:body:’ is deprecated: Subclass RCTEventEmitter instead
Javascript里可以这样调用这个方法:
import {

NativeModules,
NativeEventEmitter, //导入NativeEventEmitter模块
} from ‘react-native’;

var XXXXManger = NativeModules. XXXXManger;
//在组件中使用
componentWillMount() {
this.listener = NativeEventEmitter.addListener(‘isCallback’, this.isCallback.bind(this)); //对应了原生端的名字
}
componentWillUnmount() {
this.listener && this.listener.remove(); //记得remove哦
this.listener = null;
}
这里说下 EventEmitter 有三种类型
sendAppEventWithName

sendDeviceEventWithName

sendInputEventWithName

相对应的Javascript里也有三种类型

RCTAppEventEmitter

RCTDeviceEventEmitter

RCTInputEventEmitter

互相调用已经到此为止了:
再来说说RN的界面如何显示OC界面:
引入头文件
#import<React/RCTViewManager.h>
并继承RCTViewManager
添加宏 RCT_EXPORT_MODULE()
重写 - (UIView *)view {
return view;
}
你有可能会用到枚举类型那么你应该导入一下头文件并做如下操作
#import <React/RCTConvert.h>
@implementation RCTConvert(XXXXX)

RCT_ENUM_CONVERTER(XXXXX, (@{
@”XXXXX1”: @(XXXXX1),
@”XXXXX2”: @(XXXXX2),
@”XXXXX3”: @(XXXXX3),
}), XXXXX1, unsignedLongLongValue)
//#define RCT_ENUM_CONVERTER(type, values, default, getter) //facebook 实现代码//
@end

  • (NSDictionary *) xxxxx {
    return @{@”XXXXX1”:@(XXXXX1),
    @”XXXXX2”:@(XXXXX2),
    @”XXXXX3”:@(XXXXX3)};
    }

RCT_EXPORT_VIEW_PROPERTY(xxxxx, XXXXX);
这样在Javascript里就可以用枚举类型了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值