当前位置: 首页 > news >正文

【React Native】measureInWindow在安卓上无法正确获取View在屏幕上的布局信息

问题描述:
在React Native中,我们可以使用measureInWindow的方式去获取一个View在屏幕中的位置信息:
下面这个Demo中,我们写了一个页面HomePage和一个列表项组件ListItemA,我们期望每过5s监测一次列表中每一项在屏幕中的位置信息。
于是,我们使用useRef得到了一个ref对象,并且将ref指向ListItemA最外层的View。之后,我们每5s调用ref.current的measureInWindow方法以获取列表项在屏幕中的位置信息。
HomePage.tsx:

import React, { type FC, memo } from 'react';
import { StyleSheet, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';import ListItemA from './ListItem';const styles = StyleSheet.create({container: {height: '100%',backgroundColor: 'red',alignItems: 'center',justifyContent: 'center',},text: {fontSize: 32,color: '#f55',},
});
const HomePage: FC<{}> = () => {const data = ['商品1', '商品2', '商品3', '商品4', '商品5'];return (<View style={styles.container}><FlatListstyle={{width: '100%',paddingHorizontal: 12,}}data={data}renderItem={({ item, index }) => {return <ListItemA index={index} title={item} />;}}/></View>);
};
export default memo(HomePage);

ListItemA.tsx:

import React, { useEffect, useRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';interface IProps {index: number;title: string;
}
const styles = StyleSheet.create({container: {width: '100%',height: 40,borderRadius: 12,backgroundColor: '#ff00ff',marginTop: 12,flexDirection: 'column',justifyContent: 'center',},text: {fontSize: 14,color: '#000000',},
});
const ListItemA = (props: IProps) => {const ref = useRef<View>(null);useEffect(() => {// 每5s获取一次const timer = setInterval(() => {ref.current?.measureInWindow((x: number, y: number, width: number, height: number) => {console.log(props.index, '=>', x, y, width, height);});}, 5000);return () => {clearInterval(timer);};}, []);return (<Viewref={ref}style={{width: '100%',flexDirection: 'row',}}><View style={styles.container}><Text style={styles.text}>{`item${props.index}: ${props.title}`}</Text></View></View>);
};
export default ListItemA;

在Android手机上运行后,发现控制台log信息如下:
在这里插入图片描述

获取到的布局信息(屏幕中x坐标、屏幕中y坐标、View的宽度,View的高度)均为0。在我打开android的通知栏,再收起,打印信息甚至又发生了改变(这个数据如何得出暂时未知):
在这里插入图片描述
可以发现问题:

  1. 最开始无法获取到View的布局信息
  2. 会获取到未知错误信息(原因不详)
  3. 所有的列表项获取到的布局信息是一致的,每个列表项在屏幕中的坐标必然不同,此现象显然不符合预期

问题解决:
React Native针对android会有渲染优化,默认开启。
collapsable属性
在这里插入图片描述
我们ListItemA中的最外层View只是用来包裹了内层的View,没有其他的作用。即使在代码中移除了它,展示样式看起来也不会有变化。如果想要使用最外层View获取到布局信息,可以禁用优化,添加collapsable={false}以解决:
修改部分如下:

	<Viewref={ref}collapsable={false}style={{width: '100%',flexDirection: 'row',}}><View style={styles.container}><Text style={styles.text}>{`item${props.index}: ${props.title}`}</Text></View></View>

这时候再看打印,能够正确获取到每个列表item的布局信息了:
在这里插入图片描述

相关文章:

【React Native】measureInWindow在安卓上无法正确获取View在屏幕上的布局信息

问题描述&#xff1a; 在React Native中&#xff0c;我们可以使用measureInWindow的方式去获取一个View在屏幕中的位置信息&#xff1a; 下面这个Demo中&#xff0c;我们写了一个页面HomePage和一个列表项组件ListItemA&#xff0c;我们期望每过5s监测一次列表中每一项在屏幕中…...

C++ 教程 - 04 类的使用

文章目录 类的定义类定义案例构造函数 类的定义 C 在 C 语言的基础上增加面向对象编程&#xff0c;类是用于指定对象的形式&#xff0c;是一种用户自定义的数据类型&#xff0c;封装了数据和函数。类可以被看作是一种模板&#xff0c;可以用来创建具有相同属性和行为的多个对象…...

excel按模板文件导出多个文件并压缩为ZIP格式返回前端

思路&#xff1a;先准备好模板文件和与之对应的实体类&#xff0c;数据库数据等&#xff0c;还是之前思路&#xff0c;根据查出的数据&#xff0c;填充模板文件&#xff0c;生成一个临时文件&#xff0c;最后将这些个临时文件打包为zip返回前端&#xff0c;并将多个临时文件删除…...

自动驾驶仿真测试用例表格示例 ACC ELK FCW

自动驾驶仿真测试用例表格示例 测试用例概览 本测试用例表格涵盖了自动驾驶系统中多个关键功能和场景的测试&#xff0c;旨在确保系统在不同条件下的表现和稳定性。 用例编号测试项目测试描述预期结果实际结果通过/失败TC-001ACC功能测试在高速公路上启用ACC&#xff0c;测试车…...

数组 (java)

文章目录 一维数组静态初始化动态初始化 二维数组静态初始化动态初始化 数组参数传递可变参数关于 main 方法的形参 argsArray 工具类sort 中的 comparable 和 comparatorcomparator 比较器排序comparable 自然排序 一维数组 线性结构 静态初始化 第一种&#xff1a;int[] a…...

时序预测 | Matlab基于Transformer多变量时间序列多步预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于Transformer多变量时间序列多步预测&#xff1b; 2.多变量时间序列数据集&#xff08;负荷数据集&#xff09;&#xff0c;采用前96个时刻预测的特征和负荷数据预测未来96个时刻的负荷数据&#xff1b; 3…...

suuk-s.php.jpg-python 库劫持

做virtualBox的端口映射吧 suukmedim文件白名单绕过、反弹shell、$paht环境变量更改、python 库劫持提权、Reptile提权、sandfly-processdecloak使用 服务扫描 ┌──(kali㉿kali)-[~] └─$ sudo nmap -sV -A -T 4 -p 22,80 192.168.18.238GetSHell 访问80http://192.168.…...

python3GUI--ktv点歌软件By:PyQt5(附下载地址)

文章目录 一&#xff0e;前言二&#xff0e;展示1.启动2.搜索2.服务1.首页2.天气预报3.酒水饮料4.酒水饮料2 3.服务4.灯光5.调音6.排行榜7.分类点歌9.歌手点歌10.歌手个人页 三&#xff0e;心得体会1.关于代码2.关于设计3.关于打包 四&#xff0e;总结 文件大小&#xff1a;33.…...

opencascade AIS_InteractiveContext源码学习2

AIS_InteractiveContext 前言 交互上下文&#xff08;Interactive Context&#xff09;允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是&#xff0c;对于已经被交互上下文识别的交互对象&#xff0c;必须使用上下文方法进行…...

scale()函数详解

scale()函数是R语言中用于标准化和中心化数据的一个函数。这个函数通常用于数据预处理&#xff0c;以便于后续的分析和建模。下面是对scale()函数的详细介绍&#xff1a; 用法 scale(x, center TRUE, scale TRUE)参数 x: 一个数值型向量、矩阵或数据框&#xff0c;是需要进…...

计算机基础学习有多重要?学哪些?如何学?

计算机基础是我们计算机生涯的开始&#xff0c;而对大学生来说&#xff0c;基础是一方面&#xff0c;更重要的是应对面试。这样说吧&#xff0c;校招&#xff1a;计算机基础占90%&#xff0c;专业知识占10%&#xff0c;社招&#xff1a;计算机基础占20%&#xff0c;专业知识占8…...

Oracle day9

------------------------------------------------------------------------------------ --创建用户 create user test1 identified by 123456; create user ZJun identified by 888888; --授予权限 grant create session to test1; grant create session to ZJun; --删除用…...

Race Condition竞争条件

Race Condition Question – why was there no race condition in the first solution (where at most N – 1) buffers can be filled?Processes P0 and P1 are creating child processes using the fork() system callRace condition on kernel variable next_available_pid…...

docker 删除本地镜像释放磁盘空间

时间一长&#xff0c;本地镜像文件特别多&#xff1a; 1 linux 配置crontab 定期删除 crontab l 查看 crontab e 编辑 30 3 * * * /home/mqq/gengmingming/cleanImage-realize.sh > /home/mqq/gengmingming/cleanImage-realize.log 2>&12 cleanImage-realize.sh …...

JVM中的垃圾回收器

文章目录 垃圾回收器发展史垃圾回收器分类按线程数分类按工作模式分类按处理方式分类 查看默认垃圾收集器评估垃圾回收器性能指标吞吐量暂停时间吞吐量对比暂停时间 7种经典的垃圾回收器垃圾回收器与垃圾分代垃圾收集器的组合关系Serial GCParNew GCParallel Scavenge GCSerial…...

记录一些可用的AI工具网站

记录一些可用的AI工具网站 AI对话大模型AI图片生成AI乐曲生成AI视频生成AI音频分离 AI对话大模型 当前时代巅峰&#xff0c;Microsoft Copilot&#xff1a;https://copilot.microsoft.com AI图片生成 stable diffusion模型资源分享社区&#xff0c;civitai&#xff1a;https…...

vue3页面传参

一&#xff0c;用query传参 方法&#xff1a; router.push({path: ‘路由地址’, query: ‘参数’}) 例子&#xff1a;a页面携带参数跳转到b页面并且b页面拿到a页面传递过来的参数 在路由router.ts配置 a页面&#xff1a; <template><div >a页面</div>…...

QNX OS微内核系统

微内核架构 微内核(Microkernel)架构是一种操作系统架构模式,其核心思想是尽量将操作系统的基本功能压缩在最小的核心中,而将其他服务(如设备驱动、文件系统、网络协议等)放在用户空间中运行,从而增加系统的灵活性和安全性,这种架构有几个主要特点和优势: 最小化核心…...

ViT:5 Knowledge Distillation

实时了解业内动态&#xff0c;论文是最好的桥梁&#xff0c;专栏精选论文重点解读热点论文&#xff0c;围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;…...

2024头歌数据库期末综合(部分题)

目录 第7关&#xff1a;数据查询三 任务描述 知识补充 答案 第8关&#xff1a;数据查询四 任务描述 知识补充 答案 本篇博客声明&#xff1a;所有题的答案不在一起&#xff0c;可以去作者博客专栏寻找其它文章。 第7关&#xff1a;数据查询三 任务描述 本关任务&#x…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...