【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的通知栏,再收起,打印信息甚至又发生了改变(这个数据如何得出暂时未知):

可以发现问题:
- 最开始无法获取到View的布局信息
- 会获取到未知错误信息(原因不详)
- 所有的列表项获取到的布局信息是一致的,每个列表项在屏幕中的坐标必然不同,此现象显然不符合预期
问题解决:
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在屏幕上的布局信息
问题描述: 在React Native中,我们可以使用measureInWindow的方式去获取一个View在屏幕中的位置信息: 下面这个Demo中,我们写了一个页面HomePage和一个列表项组件ListItemA,我们期望每过5s监测一次列表中每一项在屏幕中…...
C++ 教程 - 04 类的使用
文章目录 类的定义类定义案例构造函数 类的定义 C 在 C 语言的基础上增加面向对象编程,类是用于指定对象的形式,是一种用户自定义的数据类型,封装了数据和函数。类可以被看作是一种模板,可以用来创建具有相同属性和行为的多个对象…...
excel按模板文件导出多个文件并压缩为ZIP格式返回前端
思路:先准备好模板文件和与之对应的实体类,数据库数据等,还是之前思路,根据查出的数据,填充模板文件,生成一个临时文件,最后将这些个临时文件打包为zip返回前端,并将多个临时文件删除…...
自动驾驶仿真测试用例表格示例 ACC ELK FCW
自动驾驶仿真测试用例表格示例 测试用例概览 本测试用例表格涵盖了自动驾驶系统中多个关键功能和场景的测试,旨在确保系统在不同条件下的表现和稳定性。 用例编号测试项目测试描述预期结果实际结果通过/失败TC-001ACC功能测试在高速公路上启用ACC,测试车…...
数组 (java)
文章目录 一维数组静态初始化动态初始化 二维数组静态初始化动态初始化 数组参数传递可变参数关于 main 方法的形参 argsArray 工具类sort 中的 comparable 和 comparatorcomparator 比较器排序comparable 自然排序 一维数组 线性结构 静态初始化 第一种:int[] a…...
时序预测 | Matlab基于Transformer多变量时间序列多步预测
目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于Transformer多变量时间序列多步预测; 2.多变量时间序列数据集(负荷数据集),采用前96个时刻预测的特征和负荷数据预测未来96个时刻的负荷数据; 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(附下载地址)
文章目录 一.前言二.展示1.启动2.搜索2.服务1.首页2.天气预报3.酒水饮料4.酒水饮料2 3.服务4.灯光5.调音6.排行榜7.分类点歌9.歌手点歌10.歌手个人页 三.心得体会1.关于代码2.关于设计3.关于打包 四.总结 文件大小:33.…...
opencascade AIS_InteractiveContext源码学习2
AIS_InteractiveContext 前言 交互上下文(Interactive Context)允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是,对于已经被交互上下文识别的交互对象,必须使用上下文方法进行…...
scale()函数详解
scale()函数是R语言中用于标准化和中心化数据的一个函数。这个函数通常用于数据预处理,以便于后续的分析和建模。下面是对scale()函数的详细介绍: 用法 scale(x, center TRUE, scale TRUE)参数 x: 一个数值型向量、矩阵或数据框,是需要进…...
计算机基础学习有多重要?学哪些?如何学?
计算机基础是我们计算机生涯的开始,而对大学生来说,基础是一方面,更重要的是应对面试。这样说吧,校招:计算机基础占90%,专业知识占10%,社招:计算机基础占20%,专业知识占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 删除本地镜像释放磁盘空间
时间一长,本地镜像文件特别多: 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对话大模型 当前时代巅峰,Microsoft Copilot:https://copilot.microsoft.com AI图片生成 stable diffusion模型资源分享社区,civitai:https…...
vue3页面传参
一,用query传参 方法: router.push({path: ‘路由地址’, query: ‘参数’}) 例子:a页面携带参数跳转到b页面并且b页面拿到a页面传递过来的参数 在路由router.ts配置 a页面: <template><div >a页面</div>…...
QNX OS微内核系统
微内核架构 微内核(Microkernel)架构是一种操作系统架构模式,其核心思想是尽量将操作系统的基本功能压缩在最小的核心中,而将其他服务(如设备驱动、文件系统、网络协议等)放在用户空间中运行,从而增加系统的灵活性和安全性,这种架构有几个主要特点和优势: 最小化核心…...
ViT:5 Knowledge Distillation
实时了解业内动态,论文是最好的桥梁,专栏精选论文重点解读热点论文,围绕着行业实践和工程量产。若在某个环节出现卡点,可以回到大模型必备腔调或者LLM背后的基础模型重新阅读。而最新科技(Mamba,xLSTM,KAN)…...
2024头歌数据库期末综合(部分题)
目录 第7关:数据查询三 任务描述 知识补充 答案 第8关:数据查询四 任务描述 知识补充 答案 本篇博客声明:所有题的答案不在一起,可以去作者博客专栏寻找其它文章。 第7关:数据查询三 任务描述 本关任务&#x…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...
用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章
用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章 摘要: 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言,受限于 C 语言本身的内存安全和并发安全问题,开发复杂模块极易引入难以…...
