React Native 封装iOS原生组件事件点击的理解(一)

本文介绍如何在React Native中封装iOS原生组件,并处理点击事件。通过一个示例,展示了如何实现点击图片后将消息传递给JS端,从而刷新页面。在实现过程中,遇到的问题包括Android端点击事件不生效以及事件处理的限制,通过修改代码解决了问题。

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

      这两天在做一个插件,RN 调用iOS 端封装的一个Vew,需要对这个view 进行点击操作,跳转到横屏进行处理。经实验发现,iOS端,在view 外面包一个<TouchableOpacity>可以实现view 的点击透传,但andriod 端不起作用,为了和andriod 端保持一致,所以学习了下事件的传递。

      下面以一个Demo,进行说明,由于是新手,难免会有理解不当,如有错,望前辈们指点一下。

      该Demo 主要实现的功能是初始根据JS 端给的初值,调用Xcode 端图片,生成view,并旋转90度(这里只是想记忆一下view 旋转90度的方法),然后点击图片,并传message给JS,在JS端重新刷新页面,改变text 值,这个传来的值,也会以warn 的形式显示。

1.首先在Xcode 创建四个文件,并放两个图片名为"one.jpg"和"two.jpg"

  • BridgeView.h代码如下:其中propertyArr初值会从JS端传过来。
#import <UIKit/UIKit.h>
#import <React/RCTComponent.h>

NS_ASSUME_NONNULL_BEGIN

@interface BridgeView : UIImageView

@property (nonatomic,strong)NSArray *propertyArr;        
@property(nonatomic,strong)RCTBubblingEventBlock onClick;

@end

NS_ASSUME_NONNULL_END
  • BridgeView.m代码如下:根据propertyArr设置View 显示哪张图片以及是否旋转90度。在封装的view 里添加了一个点击事件,通过此事件把message信息传给JS。
#import "BridgeVi
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值