javascript - 在 React Native 的 TabNavigator 中再次按下时滚动到当前选项卡的顶部

Question

我已使用 BottomTabNavigator react native 应用程序。在这种情况下，如果当前选择的选项卡已向下滚动FlatList，然后按导航器中的下一个选项卡并再次导航回上一个选项卡，则滚动仍位于该位置，即向下。如何在导航后滚动到当前选项卡的顶部？

我拥有的是:

导航.js

 import {createBottomTabNavigator} from "react-navigation";
     .....................................

    name: {
    screen: createBottomTabNavigator({
      first: { screen: firstNavigation },
      second: { screen: secondNavigation },
      third: { screen: thirdNavigation }
    })
  } 

我在底部有三个选项卡，分别名为第一、第二和第三，从第一个导航到第二个，第二个选项卡中的 faltlist 存在此问题。

第二个.js

        <View>
          <FlatList
            data={this.causes}
            keyExtractor={this._keyExtractor}
            renderItem={this._onPress}
            contentContainerStyle={styles.flatListContainer}
          />
        </View>

Answer 1

一个解决方案是跟踪聚焦的屏幕， 像this

 componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {
      // The screen is focused
      // Call any action
    });
  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }

您需要添加对平面列表的引用:

 <FlatList
        ref={(ref) => { this._flatList = ref; }}
        data={this.causes}
        keyExtractor={this._keyExtractor}
        renderItem={this._onPress}
        contentContainerStyle={styles.flatListContainer}
      />

只要聚焦屏幕是带有 flatlist 的屏幕，您就可以使用 scrollToIndex方法:

this._flatList.scrollToIndex({animated: true, index: 0});