【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的布局信息了:
在这里插入图片描述

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

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

相关文章

RabbitMQ(六)仲裁队列、流式队列、异地容灾(联邦队列Federation Queue)

文章目录 仲裁队列1、创建交换机2、创建仲裁队列3、验证主节点宕机不影响消息发送和接收 流式队列&#xff08;不推荐&#xff0c;Kafka主场&#xff09;概念 异地容灾一、Federation插件概述 二、Federation交换机1、总体说明2、准备工作3、启用联邦插件4、添加上游连接端点5、…

【深度学习】TCN,An Empirical Evaluation of Generic Convolutional【二】

文章目录 膨胀卷积什么是膨胀卷积膨胀卷积公式PyTorch代码 从零开始手动实现一个1D膨胀卷积&#xff0c;不使用PyTorch的nn.Conv1d1. 基本概念2. 手动实现1D膨胀卷积 TCN结构如何使用TCN源码说明1. Chomp1d 类2. TemporalBlock 类3. TemporalConvNet 类 使用方法 膨胀卷积 什么…

DVWA - Brute Force

DVWA - Brute Force 等级&#xff1a;low ​ 直接上bp弱口令爆破&#xff0c;设置变量&#xff0c;攻击类型最后一个&#xff0c;payload为用户名、密码简单列表 ​ 直接run&#xff0c;长度排序下&#xff0c;不一样的就是正确的用户名和密码 ​ 另解&#xff1a; 看一下…

【SpringBoot + Vue 尚庭公寓实战】公寓杂费接口实现(八)

【SpringBoot Vue 尚庭公寓实战】公寓杂费接口实现&#xff08;八&#xff09; 文章目录 【SpringBoot Vue 尚庭公寓实战】公寓杂费接口实现&#xff08;八&#xff09;1、公寓杂费业务介绍2、公寓杂费逻辑模型介绍3、接口实现3.1、保存或更新杂费值3.2、保存或更新杂费名称3…

Android【SDK】 SDK是如何开发的,怎么打包aar包

文章目录 一、Android SDK开发示例工程二、Android SDK的开发三、打包aar包四、Android SDK的使用 一、Android SDK开发示例工程 本教程工程Git链接&#xff1a;https://gitcode.com/xiaohuihui1400/AndroidSdkExample/overview 二、Android SDK的开发 新建项目&#xff0c;…

Photoshop中图像美化工具的应用

Photoshop中图像美化工具的应用 Photoshop中的裁剪工具Photoshop中的修饰工具模糊工具锐化工具涂抹工具 Photoshop中的颜色调整工具减淡工具加深工具海绵工具 Photoshop中的修复工具仿制图章工具污点修复画笔工具修复画笔工具修补工具内容感知移动工具红眼工具 Photoshop中的裁…

Redis持久化主从哨兵分片集群

文章目录 1. 单点Redis的问题数据丢失问题并发能力问题故障恢复问题存储能力问题 2. Redis持久化 -> 数据丢失问题RDB持久化linux单机安装Redis步骤RDB持久化与恢复示例RDB机制RDB配置示例RDB的fork原理总结 AOF持久化AOF配置示例AOF文件重写RDB与AOF对比 3. Redis主从 ->…

智能制造uwb高精度定位系统模块,飞睿智能3厘米定位测距芯片,无人机高速传输

在科技日新月异的今天&#xff0c;定位技术已经渗透到我们生活的方方面面。从手机导航到自动驾驶&#xff0c;再到无人机定位&#xff0c;都离不开精准的定位系统。然而&#xff0c;随着应用场景的不断拓展&#xff0c;传统的定位技术如GPS、WiFi定位等&#xff0c;因其定位精度…

小摩法兴纷纷转多,看涨港股的时机来了吗?

恒生指数今日高开一度上涨89点报18520点&#xff0c;创近两周高。之后持续震荡下行&#xff1b;恒指临近中 午跌幅扩大&#xff0c;恒生科技指数一度跌近1.5%。截止收盘&#xff0c;恒生指数跌0.52%&#xff0c;盘面上&#xff0c;石油、煤炭、环保、建筑节能等板块涨幅居前&a…

VScode中js关闭烦人的ts检查

类似如下的代码在vscode 会报错&#xff0c;我们可以在前面添加忽略检查或者错误&#xff0c;如下&#xff1a; 但是&#xff01;&#xff01;&#xff01;这太不优雅了&#xff01;&#xff01;&#xff01;&#xff0c;js代码命名没有问题&#xff0c;错在ts上面&#xff0c;…

112、路径总和

给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 叶子节点 是指没有子节点…

简单且高效的水域物探轨迹坐标转换程序

简单且高效的水域物探轨迹坐标转换程序 前言 水上测线的高精度定位是水域物探的难题&#xff0c;水域磁法、水域地震实施时常采用船舶拖拽传感器进行走航式观测&#xff0c;GPS仪器放在船舶上测量&#xff0c;造成船舶位置与传感器位置存在偏差&#xff0c;后期资料整理需要校…

QT-QPainter实现一个可切换的开关控件

1、效果 2、核心代码 #ifndef SWITCH_H #define SWITCH_H #include <QWidget> #include <QTimer>

Javase.String 类

String 类 【本节目标】1. String类的重要性2. 常用方法2.1 字符串构造2.2 String对象的比较2.3 字符串查找2.4 转化2.5 字符串替换2.7 字符串截取2.8 其他操作方法2.9 字符串的不可变性2.10 字符串修改 3. StringBuilder和StringBuffer3.2 面试题&#xff1a; 4. String类oj4.…

【MySQL】 -- 用户管理

1. 权限 如果我们只能使用root用户&#xff0c;这样存在安全隐患。这时&#xff0c;就需要使用MySQL的用户管理。创建出非root用户&#xff0c;限制其权限。 权限这个概念拿出来就是用来限制非root用户的。这样从技术手段上保证了数据的安全性和完整性&#xff0c;防止有人删库…

【SAP Abap】一条SQL语句实现支持报表项配置的财务报表

【SAP Abap】一条SQL语句实现支持报表项配置的财务报表 1、业务背景2、配置项特殊处理3、实现方式&#xff08;Hana Studio SQL语句&#xff09;4、实现方式&#xff08;Abap OpenSQL语句&#xff09;5、总结 1、业务背景 在财务三大报表之外&#xff0c;业务需要使用类似的科…

数据库复习——模式分解

模式分解这边主要包括无损分解和保持函数依赖的分解两种形式&#xff0c;简单整理一下。 无损分解 把一个 R R R 分成 ρ { R 1 , R 2 , ⋯ , R k } \rho \{R_1,R_2,\cdots,R_k\} ρ{R1​,R2​,⋯,Rk​}&#xff0c;然后通过自然连接 R 1 ⋈ R 2 ⋈ ⋯ ⋈ R k R_1\bowtie R…

git的远程管理与标签管理

✨前言✨ &#x1f4d8; 博客主页&#xff1a;to Keep博客主页 &#x1f646;欢迎关注&#xff0c;&#x1f44d;点赞&#xff0c;&#x1f4dd;留言评论 ⏳首发时间&#xff1a;2024年6月20日 &#x1f4e8; 博主码云地址&#xff1a;博主码云地址 &#x1f4d5;参考书籍&…

swift使用swift-protobuf协议通讯,使用指北

什么是Protobuf Protobuf&#xff08;Protocol Buffers&#xff09;协议&#x1f609; Protobuf 是一种由 Google 开发的二进制序列化格式和相关的技术&#xff0c;它用于高效地序列化和反序列化结构化数据&#xff0c;通常用于网络通信、数据存储等场景。 为什么要使用Proto…

【python】Sklearn—Cluster

参考学习来自 10种聚类算法的完整python操作示例 文章目录 聚类数据集亲和力传播——AffinityPropagation聚合聚类——AgglomerationClusteringBIRCH——Birch&#xff08;✔&#xff09;DBSCAN——DBSCANK均值——KMeansMini-Batch K-均值——MiniBatchKMeans均值漂移聚类——…