React Native 自定义 Hook 获取组件位置和大小

在 React Native 中自定义 Hook useLayout 获取 View、Pressable 等组件的位置和大小的信息

import {useState, useCallback} from 'react'
import {LayoutChangeEvent, LayoutRectangle} from 'react-native'export function useLayout() {const [layout, setLayout] = useState<LayoutRectangle>({x: 0,       // 目标元素相对父元素的X轴距离y: 0,       // 目标元素相对父元素的Y轴距离width: 0,   // 目标元素的宽度height: 0,  // 目标元素的高度})const onLayout = useCallback((e: LayoutChangeEvent) => setLayout(e.nativeEvent.layout),[],)return {onLayout,...layout,}
}

onLayout 这个在列表组件中弹窗很有用，可以方便的使用它来获取位置信息。

import { useLayout } from './useLayout'function MyComponent() {const { x, y, width, height, onLayout } = useLayout()return (<View style={{height:800,backgroundColor:'#d9f'}}><Pressable onLayout={onLayout} style={{width:100,height:100,backgroundColor:'red'}} /><View style={{position:'absolute',top:y,left:x,backgroundColor:'#eea',width:100,height:100}}><Text>{`x:${x}`}</Text><Text>{`y:${y}`}</Text></View>
</View>)
}