免费网站模板 php,wordpress建站配置,网络营销的职能是什么?,电脑如何做ppt模板下载网站问题描述#xff1a; 在React Native中#xff0c;我们可以使用measureInWindow的方式去获取一个View在屏幕中的位置信息#xff1a; 下面这个Demo中#xff0c;我们写了一个页面HomePage和一个列表项组件ListItemA#xff0c;我们期望每过5s监测一次列表中每一项在屏幕中…问题描述 在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 useRefView(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的布局信息了
