是因为在FlatList组件中,每个列表项的onLayout回调函数默认会返回列表项在父容器中的位置信息。然而,由于FlatList组件的渲染机制,列表项在渲染时可能还没有完全显示在屏幕上,导致获取到的位置信息始终为y: 0,x: 0。
要解决这个问题,可以尝试以下几种方法:
onLayout={(event) => {
setTimeout(() => {
const { x, y } = event.nativeEvent.layout;
console.log(`x: ${x}, y: ${y}`);
}, 100);
}}
renderItem={({ item }) => {
let listItemRef = useRef(null);
useEffect(() => {
if (listItemRef.current) {
listItemRef.current.measure((x, y, width, height, pageX, pageY) => {
console.log(`x: ${pageX}, y: ${pageY}`);
});
}
}, [listItemRef]);
return (
<View ref={listItemRef} onLayout={() => {}}>
{/* 列表项内容 */}
</View>
);
}}
以上是针对React本机FlatList项onLayout始终返回y: 0,x: 0的解决方法。希望对您有帮助!
关于React Native和FlatList的更多信息,您可以参考腾讯云的相关文档和产品:
领取专属 10元无门槛券
手把手带您无忧上云