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({
    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 ({height:800,backgroundColor:'#d9f'}}
	onLayout} style={{width:100,height:100,backgroundColor:'red'}} /
	{
		position:'absolute',
		top:y,
		left:x,
		backgroundColor:'#eea',
		width:100,
		height:100
	}}
		{`x:${x}`}
		{`y:${y}`}
	
)
}