React Native Flatlist сбрасывает позицию прокрутки после первоначального скрытия и показа. Как предотвратить? - PullRequest
Новая
       2

React Native Flatlist сбрасывает позицию прокрутки после первоначального скрытия и показа. Как предотвратить?

0 голосов
/ 27 марта 2019

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

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

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

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

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

Вот возвращение из моего рендера (): 

    // 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>
    )
...