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滚动到其位置？

1 个答案: