React Native 桥接组件封装原生组件属性

自定义属性可以让组件具备更多的灵活性,所以有必要在JS 层通过自定义属性动态传值。

一、添加原生组件属性

因为 ViewManager 管理了整个组件的行为,所以要新增组件属性也需要在这里面(如 InfoViewManager)进行定义。

1、在InfoViewManager 中定义一个 setAvatar 方法。

在这里插入图片描述
@ReactProp 是 React Native 中的注解,用于标记一个方法,该方法用于处理从 JavaScript 到原生组件传递的属性(props)的更新。

@ReactProp 注解标记的方法应该接受两个参数,第一个参数是原生组件实例,第二个参数是要更新的属性的值。React Native 框架会负责确保传递的属性值与方法的第二个参数类型匹配。

上图中 setAvatar 方法被 @ReactProp 注解标记,表示它用于处理 name 为 “avatar” 的属性的更新。

2、这里需要从原始的视图中拿到组件的实例去执行更新,所以需要在 InfoView 中定义一个方法去更新组件的值。

在这里插入图片描述
到这里就完成了头像 avatar 这个属性的添加。

如果没有 Glide 这个类,可在 build.gradle 文件中添加一行代码,重新下载依赖项,运行项目

implementation("com.github.bumptech.glide:glide:4.2.0")

在这里插入图片描述

3、以此类推,再给组件添加一个 desc属性

在这里插入图片描述
在这里插入图片描述

二、在 JS 层使用原生组件属性

1、修改公共组件 NativeInfoView 传入两个自定义属性 avatardesc

在这里插入图片描述

2、在业务组件里使用

在这里插入图片描述

在这里插入图片描述在这里插入图片描述
效果如图:
在这里插入图片描述
相关链接:
React Native 桥接原生实现 JS 调用原生方法
React Native 桥接原生常量
React Native 桥接原生原子组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/236538.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中通快递批量查询方法

你是否经常需要处理大量的中通快递单号,却苦于一个个等待查询?现在,有了固乔快递查询助手,这个问题迎刃而解!通过批量查询功能,你可以轻松管理、追踪你的中通快递单号,大大提高工作效率。 一、下…

H264码流进行RTP包封装

一.H264基本概念 H.264从框架结构上分为视频编码层(VCL)和网络抽象层(NAL),VCL功能是进行视频编解码,包括运动补偿预测,变换编码和熵编码等功能;NAL用于采用适当的格式对VCL视频数据…

Google ads谷歌广告投放详细步骤与技巧

对于跨境电商、独立站运营的卖家来说,谷歌广告投放是必备的流量拓展来源,但是在投入运营之前,你需要完整了解谷歌广告投放详细步骤,以为你丝滑地进行有效投放做好基础,下面为大家整理具体的谷歌投放技巧与步骤&#xf…

HCIP OSPF实验

任务: 1.使用三种解决ospf不规则区域的方法 2.路由器5、6、7、8、15使用mgre 3.使用各种优化 4.全网可达 5.保证更新安全 6.使用地址为172.16.0.0/16合理划分 7.每个路由器都有环回 拓扑图&IP划分如下: 第一步,配置IP&环回地址…

chat-plus部署指南

目录 1.下载代码 2.启动 3.测试 1.下载代码 cd /optwget https://github.com/yangjian102621/chatgpt-plus/archive/refs/tags/v3.2.4.1.tar.gz 2.启动 cd /opt/chatgpt-plus-3.2.4.1/deploydocker-compose up -d 3.测试 管理员地址xxx:8080/admin 账号密码admin/admin1…

vivado 使用项目摘要、配置项目设置、仿真设置

使用项目摘要 Vivado IDE包括一个交互式项目摘要,可根据设计动态更新命令被运行,并且随着设计在设计流程中的进展。项目摘要包括概览选项卡和用户可配置的仪表板,如下图所示。有关信息,请参阅《Vivado Design Suite用户指南&…

goland报错:The selected directory is not a valid home for Go SDK

原因: IDEA / goland无法识别到GO语言SDK版本 解决办法: 打开GO的安装目录下的src\runtime\internal\sys\zversion.go文件,添加一行(我的go版本是1.18.10) const TheVersion go1.18.10 重启goland再选择试试 最后…

【设计模式-04】Factory工厂模式

简要描述 简单工厂静态工厂工厂方法 FactoryMethod 产品维度扩展 抽象工厂 产品一族进行扩展Spring IOC 一、工厂的定义 任何可以产生对象的方法或类,都可以称之为工厂单例也是一种工厂不可咬文嚼字,死扣概念为什么有了new之后,还要有工厂&am…

科技创新领航 ,安川运动控制器为工业自动化赋能助力

迈入工业4.0时代,工业自动化的不断发展,让高精度运动控制成为制造业高质量发展的重要技术手段。北京北成新控伺服技术有限公司作为一家集工业自动化产品销售、系统设计、开发、服务于一体的高新技术企业,其引进推出的运动控制产品一直以卓越的…

详解Oracle数据库的启动

Oracle数据库的启动,其概念可参考Overview of Instance and Database Startup。 其过程可参见下图: 当数据库从关闭状态进入打开数据库状态时,它会经历以下阶段。 阶段Mount状态描述1实例在没有挂载数据库的情况下启动实例已启动&#xff…

共融共生:智慧城市与智慧乡村的协调发展之路

随着科技的飞速发展和全球化的不断深入,智慧城市和智慧乡村作为现代社会发展的重要组成部分,正逐渐成为人们关注的焦点。然而,在追求经济发展的过程中,城乡发展不平衡的问题也日益凸显。因此,如何实现智慧城市与智慧乡…

完整的模型验证套路

读取图片 from PIL import Imageimg_path "../Yennefer_of_Vengerberg.jpg" image Image.open(img_path) print(image)转换成灰度图(可选) image image.convert(L) image.show()转换成RGB格式 image image.convert(RGB)因为png格式是四…

STM32F103RCT6开发板M3单片机教程07-TIMER1CH1输出 PWM做LED呼吸灯

概述 本教程使用是(光明谷SUN_STM32mini开发板) 免费开发板 在谷动谷力社区注册用户,打卡,发帖求助都可以获取积分,当然最主要是发原创应用文档奖励更多积分. (可用积分换取,真的不用钱&…

Goby 漏洞发布|用友 NC registerServlet 反序列化远程代码执行漏洞

漏洞名称:用友 NC registerServlet 反序列化远程代码执行漏洞 English Name:Yonyou NC registerServlet Deserialize Remote Code Execute Vulnerability CVSS core: 9.8 影响资产数: 21320 漏洞描述: 用友 NC Cloud 是一种商…

熟悉HBase常用操作

1. 用Hadoop提供的HBase Shell命令完成以下任务 (1)列出HBase所有表的相关信息,如表名、创建时间等。 启动HBase: cd /usr/local/hbase bin/start-hbase.sh bin/hbase shell列出HBase所有表的信息: hbase(main):001:0> list(2)在终端输出指定表的所有记录数据。 …

k8s-存储 11

一、configmapu存储 首先,确保集群正常,节点都处于就绪状态 Configmap用于保存配置数据,以键值对形式存储。configMap资源提供了向 Pod 注入配置数据的方法,旨在让镜像和配置文件解耦,以便实现镜像的可移植性和可复用…

kylin集群反向代理(健康检查)

前面一篇文章提到了使用nginx来对kylin集群进行反向代理, kylin集群使用nginx反向代理-CSDN博客文章浏览阅读349次,点赞8次,收藏9次。由于是同一个集群的,元数据没有变化,所以,直接将原本的kylin使用scp的…

RabbitMQ(六)消息的持久化

目录 一、简介1.1 定义1.2 消息丢失的场景 二、交换机的持久化方式一:直接 new方式二:channel.exchangeDeclare()方式三:ExchangeBuilder【推荐】 三、队列的持久化方式一:直接 new方式二:channel.queueDeclare()方式三…

C++核心编程——类和对象(二)

本专栏记录C学习过程包括C基础以及数据结构和算法,其中第一部分计划时间一个月,主要跟着黑马视频教程,学习路线如下,不定时更新,欢迎关注。 当前章节处于: ---------第1阶段-C基础入门 ---------第2阶段实战…

AI绘画软件Stable Diffusion模型/Lora/VAE文件存放位置

型下载说明(下载模型后输入对应参数即可生成) 建议直接去civitai.com找模型,如果无法找到可以在幕后模型区找也可以去, 下载好后放入对应的文件夹。进入127.0.0.1:7680 左上角刷新即可看到新的模型。 模型种类 大模型 大模型特…