Блог

Я работаю над экраном React Native. В нем есть две вкладки. Давайте просто вызовем это, Tab 1 и Tab 2 на каждой вкладке будет отображаться Flatlist с данными, специфичными для данной вкладки.

Я контролирую отображение или скрытие каждого Flatlist.

Вот странное поведение:

1. При загрузке экрана по умолчанию отображается Tab 1 .
2. Прокрутка Flatlist 1
3. Нажмите на Tab 2 , Flatlist 2 показывает
4. Нажмите на Tab 1 , положение прокрутки вернется к началу списка!
5. После этого первоначального странного поведения любая последующая прокрутка во flatlist любой вкладки СОХРАНЯЕТ положение прокрутки там, где вы его оставили.

Что я могу сделать, чтобы это исправить?

Вот результат моего 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>
    )