从 React Native 0.63 开始,UIManager.measure 方法已被废弃并计划在未来的版本中移除。
取而代之的是使用 useRef
和 useLayoutEffect
钩子函数,
结合 measure
方法的异步调用实现对组件的测量。
具体实现方法如下:
- 首先通过
useRef
钩子函数获取组件的引用 - 使用
useLayoutEffect
钩子函数监听组件的挂载和更新事件,在回调函数中异步调用measure
方法进行测量
示例代码如下:
import React, { useRef, useLayoutEffect } from 'react'; import { View, Text } from 'react-native'; const ExampleComponent = () => { const viewRef = useRef(null); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); const [x, setX] = useState(0); const [y, setY] = useState(0); useLayoutEffect(() => { if (viewRef.current) { viewRef.current.measure((xPos, yPos, measuredWidth, measuredHeight, pageX, pageY) => { setWidth(measuredWidth); setHeight(measuredHeight); setX(pageX); setY(pageY); }); } }, [viewRef]); return ( <View ref={viewRef}> <Text>Example Component</Text> </View> ); };