【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}>
      <FlatList
        style={{
          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 (
    <View
      ref={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}以解决:
修改部分如下:

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

通过搭建 24 点小游戏应用实战,带你了解 AppBuilder 的技术原理

本文将通过一个 24 点小游戏的案例&#xff0c;详细介绍百度智能云千帆 AppBuilder 的基本技术原理和使用方法&#xff0c;帮助读者快速掌握 AI 原生应用的开发流程。 1 三步构建 AI 原生应用方法论 AI 原生应用与传统应用的最大区别是交互形态彻底的拟人化&#xff0c;通过文…

【Linux学习十八】网站管理:防火墙介绍、静态站点、动态站点、域名

1.Apache Apache官网: www.apache.org 软件包名称: httpd 服务端口:80/tcp(http) 443/tcp(https) 配置文件: /etc/httpd/conf/httpd.conf 子配置文件:/etc/httpd/conf.d/*.conf 查看被占用的端口号 netstat -tuln | grep <端口号> 解哪个程序正在使用端口 80&#xff0…

vue封装原生table表格方法

适用场景&#xff1a;有若干个表格&#xff0c;前面几列格式不一致&#xff0c;但是后面几列格式皆为占一个单元格&#xff0c;所以需要封装表格&#xff0c;表格元素自动根据数据结构生成即可&#xff1b;并且用户可新增列数据。 分类&#xff1a; 固定数据部分 就是根据数据…

docker配置redis主从复制

下载redis,复制redis.conf 主节点(6379) 修改redis.conf # bind 127.0.0.1 # 注释掉这里 protected-mode no # 改为no port 6379从节点(6380) 修改redis.conf bind 127.0.0.1 protected-mode no # 改为no port 6380 replicaof 172.17.0.2 6379 # 这里的ip为主节点容器的i…

SpringSecutrity原理

一、基于RBAC实现的权限管理通常需要涉及以下几张表&#xff1a; 1. 用户表&#xff08;user&#xff09;&#xff1a;记录系统中的所有用户&#xff0c;包括用户ID、用户名、密码等信息。 2. 角色表&#xff08;role&#xff09;&#xff1a;记录系统中的所有角色&#xff0…

【项目管理体系】代码评审规范

1完整性检查 2一致性检查 3正确性检查 4可预测性检查 5健壮性检查 6结构性检查 7可追溯性检查 8可理解性检查 9可验证性检查 软件开发全套资料获取&#xff1a;&#xff08;本文末个人名片直接获取&#xff09; 软件产品&#xff0c;特别是行业解决方案软件产品不同于一般的商品…

汽车EDI: BMW EDI项目案例

宝马集团是全世界成功的汽车和摩托车制造商之一&#xff0c;旗下拥有BMW、MINI和Rolls-Royce三大品牌&#xff1b;同时提供汽车金融和高档出行服务。作为一家全球性公司&#xff0c;宝马集团在14个国家拥有31家生产和组装厂&#xff0c;销售网络遍及140多个国家和地区。 本文主…

在Linux Ubuntu系统中使用Pascal语言

Pascal是一种结构化编程语言&#xff0c;而Free Pascal作为其现代编译器&#xff0c;不仅支持跨多种操作系统和处理器架构&#xff0c;还提供了高效的内存使用和函数重载等先进功能。Free Pascal继承了Pascal语言的核心特性&#xff0c;同时进行了扩展和优化&#xff0c;使其成…

【算法】单调队列 - 基础与应用-滑动窗口最大值

题目 给定一个数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回滑动窗口中的最大值。 思路 暴力&#xff1a;遍历一遍的过程中每次从窗口找到最大的数组&#…

Springboot 项目启动时扫描所有枚举并存入缓存(redis)

为什么这么做? 为了springboot 注解属性转换字典方便一点(使用缓存的方式在Springboot 启动时获取字典数据) 在启动时会扫描com.vehicle.manager.core.enumerate包下的所有枚举(包括类中的内部枚举),并取出对应属性以json的方式存入redis 目录结构如下: RedisUtil可以在Red…

无线领夹麦克风怎么挑选,能让声音变好听的领夹麦推荐大全

近年来&#xff0c;随着直播销售和个人视频日志&#xff08;Vlog&#xff09;的流行&#xff0c;自媒体内容创作已经成为一种文化现象。这一现象不仅改变了人们获取信息的方式&#xff0c;也极大地推动了相关音频设备的发展。无线领夹麦克风&#xff0c;以其轻巧的设计和出色的…

GPT-5即将登场,AI赋能未来:我们该如何迎接这场技术变革?

文章目录 从高中生到博士生&#xff1a;GPT-4到GPT-5的飞跃科技界的惊叹与期待GPT-5的影响与应用场景1. 更强的自然语言处理能力2. 智能助理的升级3. 教育与培训4. 创意产业5. 数据分析与决策支持 如何迎接GPT-5的到来&#xff1f;1. 学习与适应2. 探索与创新3. 合作与共赢4. 关…

gin-vue -admin 初始化安装后 进入 后台首页报错

报错原因&#xff1a; 因为 我是使用的phpstudy 小皮的数据库 默认的是MySam 的引擎 mysql 引擎需要是 innoDB 解决办法 &#xff1a; 在linux 的环境下 配置一个数据库 &#xff0c; 我是用的是vmware 虚拟机

windows系统如何快速查看显卡详情信息

winR&#xff0c;输入dxdiag 打开DirectX诊断工具&#xff0c;可以看到显卡的详细硬件信息

帝国cms未审核文章可视化预览效果

有时候为了让编辑更加清楚的看到别人审核之后的效果&#xff0c;同时文章有需要下一级审核才能在前端展示出来&#xff0c;今天就来展示一个未审核文章预览审核后的效果 这次给某出版社开发的时候&#xff0c;他们需要实现编辑能够预览自己发布之后的审核效果&#xff0c;所以就…

深度學習筆記14-CIFAR10彩色圖片識別(Pytorch)

&#x1f368; 本文為&#x1f517;365天深度學習訓練營 中的學習紀錄博客&#x1f356; 原作者&#xff1a;K同学啊 | 接輔導、項目定制 一、我的環境 電腦系統&#xff1a;Windows 10 顯卡&#xff1a;NVIDIA GeForce GTX 1060 6GB 語言環境&#xff1a;Python 3.7.0 開發…

一本顶三本?入门LLM大模型必读《大模型应用开发极简入门》附PDF书籍

今天带来的是最近刚出版的新书&#xff1a; 《大模型应用开发极简入门&#xff1a;基于 GPT-4 和ChatGPT》 。 这本书是 O’Reilly 出版的&#xff0c;两位共同作者是来自 Worldline 公司的机器学习研究员 Olivier Caelen 和 数据工程师 Marie-Alice Blete。这两位作者一位侧重…

Zynq7000系列FPGA中的定时器详细介绍

每个Cortex-A9处理器都有自己的专用32位定时器和32位看门狗定时器。两个处理器共享一个全局64位定时器。这些定时器总是以CPU频率&#xff08;CPU_3x2x&#xff09;的1/2进行计时。 在系统级&#xff0c;有一个24位看门狗定时器和两个16位三重定时器/计数器。 系统看门狗定时器…

域名 Whois 检测:企业网络安全与品牌保护的利器

域名是企业在互联网上的重要标识&#xff0c;其安全性和合规性直接影响着企业的业务运营和品牌声誉。而域名 Whois 检测通过全面分析和监控域名的 Whois 信息&#xff0c;为企业提供了多方面的保障&#xff0c;帮助企业识别潜在的网络威胁、保护品牌资产、优化域名管理。 那么什…

向量数据库原理之向量索引

向量索引 在前面的文章中讲解了milvus的源码安装——向量数据库milvus源码剖析之开篇&#xff0c;向量数据库通常具备以下特点&#xff1a; 向量索引&#xff1a;用来支持高效的搜索&#xff0c;快速定位与查询向量相关的数据集。相似度搜索&#xff1a;支持余弦、欧式距离等的…