【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…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
