在 React Native 中，如何获取自定义组件的 Y 偏移量，然后将 ScrollView 滚动到其位置？

Question

在 React Native 中，我有一个带有 ScrollView 的屏幕：

let scrollView;
let myComponent2;

function onPress() {
  myComponent2.measure((frameOffsetX, frameOffsetY, width, height, pageOffsetX, pageOffsetY) => {
  scrollView.scrollTo({ y: frameOffsetY });
}

function MyScrollView() {
  return (
    <ScrollView ref={ref => scrollView = ref}>
      <MyButton onPress={onPress} />
      <MyComponent1 />
      <MyComponent2 ref={ref => myComponent2 = ref} />
      <MyComponent3 />
    </ScrollView>
  );
};

而MyButton 是这样定义的：

function MyButton(props) {
  return (
    <TouchableHighlight onPress={props.onPress}>
      <Text>Press Me</Text>
    </TouchableHighlight>
  );
}

我想要完成的是，当用户按下MyButton 组件时，ScrollView 应该滚动以便MyComponent2 可见。问题是我不能在自定义组件上使用measure，只能直接在View中使用。

所以我的问题是：获取自定义 React Native 组件的 Y 偏移量的最佳方法是什么？

Answer 1

我最终将我的组件包裹在一个额外的 View 周围，以便能够获得它的偏移量：

let scrollView;
let myComponent2Wrapper;

function onPress() {
  myComponent2Wrapper.measure((frameOffsetX, frameOffsetY, width, height, pageOffsetX, pageOffsetY) => {
  scrollView.scrollTo({ y: frameOffsetY });
}

function MyScrollView() {
  return (
    <ScrollView ref={ref => scrollView = ref}>
      <MyButton onPress={onPress} />
      <MyComponent1 />
      <View ref={ref => myComponent2Wrapper = ref}>
        <MyComponent2 />
      </View>
      <MyComponent3 />
    </ScrollView>
  );
};