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

news2024/11/16 23:47:04

自定义属性可以让组件具备更多的灵活性,所以有必要在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.coloradmin.cn/o/1377594.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用Web自动化测试工具显著好处

随着互联网技术的飞速发展,Web应用程序在企业中的重要性不断上升。为了确保Web应用程序的质量和稳定性,许多企业转向了Web自动化测试工具。下面是使用Web自动化测试工具的一些显著好处: 1. 提高测试覆盖率 Web自动化测试工具可以模拟用户与We…

软件测试|解读Python的requirements.txt文件:管理项目依赖的完整指南

简介 在Python项目中,管理依赖库是必不可少的。requirements.txt文件是一种常用的方式,用于列出项目所需的所有依赖库及其版本。本文将详细介绍requirements.txt的用法,帮助你更好地管理项目的依赖。 使用步骤 创建requirements.txt文件&am…

二叉树-遍历-单独精讲

文章目录 遍历中序遍历/节点的中序前序遍历-节点的前序后序遍历-节点的后序三序综合13-Apush前/前序前13-Bpush前/中序前13-Cpush前/后序前 两序重叠示例一13前序前13中序前 示例二13前序前13后序前 示例三13中序前13后序前 遍历 遍历 即:遍历每个元素。 for遍历只会遍历每个…

Kafka配置Kerberos安全认证及与Java程序集成

Background 本文主要介绍在 Kafka 中如何配置 Kerberos 认证,以及 java 使用 JAAS 来进行 Kerberos 认证连接。本文演示为单机版。 所用软件版本 查看 Kerberos 版本命令:klist -V 软件名称版本jdk1.8.0_202kafka2.12-2.2.1kerberos1.15.1 1、Kerberos …

RT-Thread:STM32 PHY 调试,使用软件包 WIZNET 驱动 W5500

说明: 1. 本文记录使用 RT-Thread 软件包 WIZNET驱动 W5500 的调试笔记。 2. 采用 RT-Thread Studio 工程 STM32F407VET6 芯片,W5500 PHY芯片,两者之间使用SPI接口链接 。 注意: 1.在按流程建立工程,和移植完 wizn…

ASP.NET摄影展示网站源码

ASP.NET摄影展示网站源码 项目描述 网站利用了ext技术,用户自定义了展示控件 前台展示类别有: 协会动态,摄影理论,影展影赛,采风路线, 影友之窗,佳作欣赏,器材专区,展览信…

「达摩院MindOpt」优化FlowShop流水线作业排班问题

FlowShop流水线作业 在企业在面临大量多样化的生产任务时,如何合理地安排流水线作业以提高生产效率及确保交货期成为了一个重要的问题。 一个典型的问题就是FlowShop流水线作业安排问题,也有称为生产下料问题。它涉及到多台机器、多个工序以及多个作业的调度安排。…

QWebEngineView类方法、属性、信号与槽汇总

文章目录 📖 介绍 📖🏡 环境 🏡📒 使用方法 📒📝 使用示例📝 方法📝 属性📝 信号(Signals)📝 槽(Slots)⚓️ 相关链接 ⚓️📖 介绍 📖 QWebEngineView 是 Qt 提供的一个用于呈现 Web 内容的类,基于 Google 的 Chromium 浏览器引擎。它提供了对现…

在线直线度测量仪确保了出厂圆棒无不合格品

在线直线度测量仪确保了出厂圆棒无不合格品 随着生产设备的改进,利用基础材料进行生产的厂家对品质要求也越来越高,其中圆形棒管材的直线度尺寸,也是广受关注,对其进行矫直检测,使其出厂无不合格品。 变抽检为全检 以前…

C 语言每日一题——旋转数组的最小数字

一、题目内容 提供一下该OJ题的链接:旋转数组的最小数字_牛客题霸_牛客网 (nowcoder.com) 二、题目分析 通过示例1可知,我们写代码的目的是在数组中找到一个最大值,并且返回来; 我们很容易的会想到创建一个变量:int…

企业培训系统源码:构建智能、可扩展的学习平台

企业培训系统在现代企业中扮演着至关重要的角色。本文将通过深度解析企业培训系统的源码,介绍如何构建一个智能、可扩展的学习平台,涉及关键技术和代码实例。 1. 技术栈选择与项目初始化 在构建企业培训系统之前,选择适当的技术栈是至关重…

先锋WEB燃气收费系统 Upload.aspx 文件上传漏洞复现

0x01 产品简介 先锋WEB燃气收费系统是一种先进的在线燃气收费解决方案,旨在简化和优化燃气收费的流程和管理。该系统基于Web平台,提供了一系列功能和工具,使燃气公司能够高效地进行收费、账单管理和客户服务。 0x02 漏洞概述 先锋WEB燃气收费系统/AjaxService/Upload.asp…

Windows压缩包的MySQL安装方式

1.下载压缩包 https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.35-winx64.zip 2.解压压缩包(建议将解压到非C盘,路径不要出现特殊符号) 3.在MySQL主目录下,创建my.ini空文件(先创建一个txt文件,进…

软件测试|selenium 元素无法选择异常的原因及解决

简介 在进行 Web 自动化测试时,使用 Selenium 可能会遇到各种异常情况。其中之一就是 ElementNotSelectableException 异常,该异常通常意味着在尝试选择一个不可选元素时出现了问题。本文将详细介绍这个异常的原因、可能的解决方法,并提供示…

微信小程序开发学习笔记《10》页面导航

微信小程序开发学习笔记《10》页面导航 博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。导航 官方文档 一、介绍 1. 什么是页面导航 页面导航指的是页面之间的相互跳转。例如,浏览器中实现页面导航的方式有如下两种: …

<蓝桥杯软件赛>零基础备赛20周--第14周--BFS

报名明年4月蓝桥杯软件赛的同学们,如果你是大一零基础,目前懵懂中,不知该怎么办,可以看看本博客系列:备赛20周合集 20周的完整安排请点击:20周计划 每周发1个博客,共20周。 在QQ群上交流答疑&am…

C++I/O流——(2)预定义格式的输入/输出(第一节)

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 含泪播种的人一定能含笑收获&#xff…

snmp协议配置

引言 SNMP(Simple Network Management Protocol)是一种网络管理协议,用于管理和监控网络设备、操作系统和应用程序。它提供了一组用于检索和修改网络设备配置、监视设备状态和性能的标准化方法。 SNMP 是一个客户端-服务器协议,…

【Docker】数据管理之数据卷的挂载

一、什么是数据卷 为了很好的实现数据保存和数据共享,Docker提出了Volume这个概念,简单的说就是绕过默认的联合 文件系统,而以正常的文件或者目录的形式存在于宿主机上。又被称作数据卷。数据卷提供了一些有用的特性: 数据卷可以在…

java自定义排序Comparator

📑前言 本文主要是【java】——java自定义排序Comparator的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 🌄每…