如何在更改活动索引时使 React Native 选项卡视图滚动回选项卡顶部

Question

我的屏幕具有以下结构：

<ScrollView>
  <View style={styles.container}>
    <View style={styles.topPanel} />
    <View style={styles.titleSection}>
      <View>
        <Image style={styles.profilePicture} source={logos} />
      </View>
      <View style={styles.textComponent}>
        <TextComponent
          boldness="extraBold"
          style={styles.titleSection__title}>
          ...
        </TextComponent>
        <TextComponent
          boldness="semiBold"
          style={styles.titleSection__text}>
          ...
        </TextComponent>
      </View>
      <View style={styles.verticalLine} />
      <RatingAndLocation location={6} medianRating={4.2} />
      <View>
        <TextComponent
          boldness="semiBold"
          style={styles.titleSection__desc}>
          ...
        </TextComponent>
      </View>
      <View style={styles.verticalLine} />
    </View>
  </View>
  <TabView images={images} setGalleryIndex={setGalleryIndex} />
</ScrollView>

Tabview 组件包含

react-native-tabview

选项卡，这些选项卡是包含内容的滚动视图。我正在尝试像这样设置scrollView的滚动位置：

navigation.addListener('blur', () => {
  scrollViewRef.scrollTo({ y: 0, x: 0, animated: true });
});

但这不起作用。 嵌套滚动视图不起作用。他们不会触发 onScroll 事件。只有父滚动视图可以做到这一点。我想知道是否有办法解决这个问题。

据我了解，您不能嵌套垂直滚动视图，但是如何才能使每个选项卡成为单独的滚动视图并在更改索引时滚动到其顶部？

这一切应该是这样的：

Answer 1

为了触发scrollTo函数，你必须将其包装在setTimeout中

setTimeout(() => {
   scrollViewRef.scrollTo({ y: 0, x: 0, animated: true });
}, 1)