Question

我在React Native屏幕上工作。它有两个选项卡。我们将其命名为Tab 1和Tab 2 每个标签都会显示一个Flatlist，其中包含该标签专用的数据。

我控制每个Flatlist的显示或隐藏。

这是奇怪的行为：

屏幕加载时，Tab 1是显示的默认设置。
滚动Flatlist 1
点击Tab 2，显示Flatlist 2
轻按Tab 1，滚动位置将回到列表的开头！
在出现这种最初的怪异行为之后，任何一个选项卡的平板列表中的后续滚动都将保持您离开它的位置的滚动位置。

该如何解决？

这是我的render（）的回报：

    // Need to have two different components (and show/hide them accordingtly)
    // so that they each maintain their own scroll position, etc.
    const youActivityStyle = activityTabIndex === 0 ? { display: 'flex' } : {display: 'none'}
    const followingActivityStyle = activityTabIndex === 0 ? { display: 'none'} : {display: 'flex' }

    return (
      <React.Fragment>
        <View style={youActivityStyle}>
          <FlatList
            data={activityDataMe}
            renderItem={this.renderItem}
            keyExtractor={this.activityKeyExtractor}
            ListHeaderComponent={this.renderHeader}
            ListFooterComponent={this.renderFooter}
            contentContainerStyle={styles.flatListContentContainerStyle}
            onRefresh={this.onRefresh}
            refreshing={activityRefreshing}
            onEndReached={this.flatListOnEndReached}
            onEndReachedThreshold={0.5}
            onMomentumScrollBegin={this.flatListOnMomentumScrollBegin} />
        </View>
        <View style={followingActivityStyle}>
          <FlatList
            data={activityDataFollowing}
            renderItem={this.renderItem}
            keyExtractor={this.activityKeyExtractor}
            ListHeaderComponent={this.renderHeader}
            ListFooterComponent={this.renderFooter}
            contentContainerStyle={styles.flatListContentContainerStyle}
            onRefresh={this.onRefresh}
            refreshing={activityRefreshing}
            onEndReached={this.flatListOnEndReached}
            onEndReachedThreshold={0.5}
            onMomentumScrollBegin={this.flatListOnMomentumScrollBegin} />
        </View>
      </React.Fragment>
    )

在初始隐藏和显示后，React Native Flatlist会重置滚动位置。怎么预防？

0 个答案: