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

时间:2020-10-11 08:56:43

标签: reactjs react-native scrollview react-native-tab-view

我的屏幕结构如下:

<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个选项卡,这些选项卡是带有内容的scrollViews。我正在尝试像这样设置scrollView的滚动位置:

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

但是它不起作用。 嵌套的滚动视图不起作用。他们不触发onScroll事件。只有父级滚动视图才能做到这一点。我想知道是否有解决此问题的方法。

据我了解,您不能嵌套垂直的scrollViews,但是当更改索引时又如何使每个选项卡成为单独的scrollView并滚动到其顶部呢?

这是所有内容的样子:

enter image description here

0 个答案:

没有答案