【React Native】measureInWindow在安卓上无法正确获取View在屏幕上的布局信息

tran_sient

已于 2024-06-20 16:11:46 修改

阅读量1k

点赞数 7

分类专栏： React Native 文章标签： react native android

于 2024-06-20 15:57:12 首次发布

本文链接：https://blog.csdn.net/tran_sient/article/details/139833127

版权

问题描述：
在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'