在 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>
  );
};

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

In React Native, how can I get the Y offset of a custom component and then scroll a ScrollView to its position?

javascript

scrollview

uiscrollview

react-native