【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.mzph.cn/web/33093.shtml

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

相关文章

FW Activity跳转动画源码解析(一)

文章目录 跳转动画实际操作的是什么?窗口怎么知道应该执行什么动画,是透明,还是平移,还是缩放,旋转? 跳转动画实际操作的是什么? startActivity调用之后进行页面跳转,会有一系列的涉及到ActivitStar,ActivityTask,ActivityManager等类的操作,最终在执行动画会调用到Surface…

【LinuxC语言】第一个简单的tcp/ip客户端

文章目录 前言一、客户端连接服务器的示意图二、客户端涉及的相关函数socket函数connect函数struct sockaddr结构体相关的转换函数connect主体函数发送数据函数接收数据函数关闭socket客户端示例代码总结前言 在计算机网络中,TCP/IP 是最常见的网络协议。它为我们提供了一种可…

可视化实训复习篇章

前言&#xff1a; 今天&#xff0c;我们来学习seaborn库可视化&#xff0c;当然&#xff0c;这个建立在Matplotlib的基础上&#xff0c;话不多说&#xff0c;进入今天的正题吧&#xff01;当然&#xff0c;这个是《python数据分析与应用》书中&#xff0c;大家有需求的可以参考…

将一维机械振动信号构造为训练集和测试集(Python)

从如下链接中下载轴承数据集。 https://www.sciencedirect.com/science/article/pii/S2352340918314124 import numpy as np import scipy.io as sio import matplotlib.pyplot as plt import statistics as stats import pandas as pd from sklearn.model_selection import t…

在Ubuntu下将pulseaudio换成pipewire

1、为什么要将pulseaudio换成pipewire&#xff1f; PulseAudio 是一个成熟且广泛使用的音频服务器&#xff0c;适合一般桌面音频需求&#xff0c;但在性能和延迟上有一定限制。PipeWire 是一个更现代的解决方案&#xff0c;旨在统一音频和视频处理&#xff0c;提供高性能和低延…

苹果可能与 Meta 合作开发人工智能

随着苹果进入AI领域&#xff0c;它也在寻求合作伙伴的帮助。 在本月早些时候宣布Apple Intelligence期间&#xff0c;苹果表示将与OpenAI合作&#xff0c;将ChatGPT引入改版后的Siri。据《华尔街日报》报道&#xff0c;苹果和Facebook的母公司Meta也在讨论类似的合作事宜。 据…

微服务、多租户、单点登录、国产化形成的开源Java框架!

一、项目简介 JVS是软开企服构建的一站式数字化的开源框架&#xff0c;支持对接多种账户体系&#xff0c;支持多租户、支持Auth2、统一登录、单点登录等&#xff0c;支持原生开发、低代码/零代码开发应用。 二、框架核心功能 控制台(首页)&#xff1a;采用配置化的方式 用户…

已经被驳回的商标名称还可以申请不!

看到有网友在问&#xff0c;已经驳回的商标名称还可以申请不&#xff0c;普推商标知产老杨觉得要分析看情况&#xff0c;可以适当分析下看可不可以能申请&#xff0c;当然最终还是为了下证 &#xff0c;下证概率低的不建议申请。 先看驳回理由&#xff0c;如果商标驳回是绝对理…

华为某员工爆料:偷偷跑出去面试,被面试官鄙视了。第一句话就问:华为淘汰的吧,35岁了,这个年龄在华为能混得下去吗?身体没啥毛病吧

“你都35岁了&#xff0c;难不成是被华为淘汰的&#xff1f;在华为混不下去了吧&#xff1f;身体没啥毛病吧&#xff0c;我们这体检可是很严的。” 近日&#xff0c;一位华为员工在朋友圈爆料&#xff0c;自己在面试时遭到了面试官的无理取闹和人身攻击&#xff0c;原因仅仅是因…

RK3568 Android 11,安装apk有哪些方法

在RK3568 Android 11设备上安装APK文件&#xff0c;您可以使用以下几种方法&#xff1a; 1. 通过文件管理器安装 将APK文件传输到设备上&#xff0c;可以通过USB连接、蓝牙、电子邮件附件等方式。打开设备上的文件管理器应用。导航到APK文件所在的目录。点击APK文件&#xff…

【Java】内部类

认识内部类&#xff1a;Java中内部类分如下三种 匿名内部类 实例内部类 静态实例内部类 匿名内部类 匿名内部类顾名思义就是在创建的时候不用赋予名字。 代码演示&#xff1a; //匿名内部类 interface IA{void test(); } public class Main{public static void main(Str…

做国际期货有什么心得?

做过现货&#xff0c;外汇&#xff0c;国际期货&#xff0c;当然&#xff0c;做国际期货的时间比较多&#xff0c;几乎占用了我的交易生涯全部。现在&#xff0c;来讲讲我做国际期货的真实经历&#xff0c;交易历程和心得体会&#xff0c;希望正在做国际期货&#xff0c;或打算…

自定义Linux ISO live 启动(PE)镜像总结

这里母盘制作使用Linux Mint 制作母盘需要安装的扩展脚本https://cloud.189.cn/t/quqQBfzEnmYf &#xff08;访问码&#xff1a;0pyi&#xff09; cn.i8520.toolbox.deb cn.i8520.conky.deb根具你的需求安装这个 这是第一个帖子&#xff0c;制作 filesystem.squashfs 文件…

Sapphire开发日志 (十) 关于页面

关于页面 任务介绍 关于页面用户对我组工作量的展示。 实现效果 代码解释 首先封装一个子组件用于展示用户头像和名称。 const UserGrid ({src,name,size,link, }: {src: any;name: any;size?: any;link?: any; }) > (<Box sx{{ display: "flex", flex…

边缘计算和本地计算有什么区别

边缘计算和本地计算是两种不同的计算模式&#xff0c;它们在数据处理的位置、网络依赖性、响应时间、资源利用和应用场景等方面存在显著差异。 ### 边缘计算&#xff08;Edge Computing&#xff09; 边缘计算是一种分布式计算范式&#xff0c;它将数据处理和计算任务从集中式…

每日一练:攻防世界:5-1 MulTzor

一、XorTool 基于 XOR&#xff08;异或&#xff09;运算实现。它可以帮助您快速地对文本、二进制文件进行加密解密操作。 认识XorTool工具&#xff1a; 让我们先去认识一下工具&#xff1a; xortool.py 是基于 python 的脚本&#xff0c;用于完成一些 xor 分析&#xff0c;…

【C语言】多线程

C语言之多线程创建 多线程一、线程创建和回收二、线程属性三、线程分离 最后 多线程 线程是轻量级的线程(LWP:light weight process) 线程是最小执行单位&#xff0c;进程是最小分配资源单位。一个进程可以有多个线程&#xff0c;一个进程可以理解为只有一个线程的进程。 每个线…

3D模型相关生成

3D模型相关生成 1. DreamFusion Model DreamFusion Model 是一种将文本描述转化为三维模型的技术。你可以想象它是一个“魔法翻译器”&#xff0c;你告诉它一个场景或物体的描述&#xff0c;比如“一个飞翔的龙”&#xff0c;它就能生成一个相应的 3D 模型。 原理&#xff1…

测试实习生【面试小结 6.20】

1&#xff0c;自我介绍 2&#xff0c;你为什么要考虑测试这一份工作呢&#xff1f; 首先&#xff0c;据我了解&#xff0c;在近几年&#xff0c;国内对软件测试越来越重视了&#xff0c;并且从用户角度来说&#xff0c;对于同类产品&#xff0c;可能更加注重于产品的质量和服务…

【云计算 复习】第6节 AWS亚马逊

一、基础存储架构Dynamo 1.概述 &#xff08;1&#xff09;为了保证其稳定性&#xff0c;Amazon的系统采用完全的分布式、去中心化的架构。 &#xff08;2&#xff09;Dynamo只支持简单的键值对方式的数据存储&#xff0c;不支持复杂的查询 &#xff08;3&#xff09;Dynamo中…