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

问题描述

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

In React Native, I have a screen with a 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 中使用.

What I'm trying to accomplish is that when the user presses on the MyButton component, the ScrollView should scroll so that MyComponent2 is visible. The problem is that I can't use measure on a custom component, only directly in a View.

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

推荐答案

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

I ended up wrapping my component around an extra View to be able to get its offset:

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 滚动到其位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！