React Native如何获取滚动或移动后视图的绝对位置？

可用的实时获取视图绝对位置方案 #

React Native 提供了原生视图的测量API，可以直接通过视图ref调用，每次调用都会返回当前最新的位置坐标，不受滚动、动画导致的位移影响。

1. 直接调用 measureInWindow 方法（推荐）

该方法可以直接返回视图当前在手机窗口内的绝对坐标，调用方式最简单：

• 先给目标视图绑定ref：

const targetViewRef = useRef(null);

// 视图绑定ref
<View ref={targetViewRef} style={/* 你的样式 */} />

• 需要获取位置时直接调用：

targetViewRef.current?.measureInWindow((x, y, width, height) => {
  // x: 视图左上角相对于窗口的绝对X坐标
  // y: 视图左上角相对于窗口的绝对Y坐标
  // width/height: 视图当前宽高
  console.log('当前绝对位置：', x, y);
})

2. 调用 measure 方法

如果需要同时获取视图相对于父元素的相对位置，可以用这个方法：

targetViewRef.current?.measure((relativeX, relativeY, width, height, absoluteX, absoluteY) => {
  // relativeX/relativeY: 相对于父容器的位置
  // absoluteX/absoluteY: 相对于屏幕的绝对位置
})

滚动场景实时获取位置

如果需要在ScrollView滚动时实时拿到最新位置，只需把测量逻辑绑定到ScrollView的onScroll事件即可：

<ScrollView 
  onScroll={() => {
    // 这里调用上面的测量逻辑即可
  }}
  scrollEventThrottle={16} // 控制触发频率，16ms即和屏幕刷新同步
>
  {/* 滚动内容 */}
</ScrollView>

注意事项 #

• 确保调用测量方法时，视图已经完成挂载渲染，否则可能返回0值。如果需要在组件挂载后立即获取，可以把调用逻辑放在onLayout回调或者InteractionManager.runAfterInteractions中执行。
• Android端如果出现测量返回0的情况，给目标视图添加collapsable={false}属性即可，该属性会禁止React Native对静态视图做合并优化，确保测量逻辑正常运行。

内容的提问来源于stack exchange，提问作者Monu