Что вызывает сбои в FlatList в React Native? - PullRequest
Новая
       19

Что вызывает сбои в FlatList в React Native?

0 голосов
/ 04 ноября 2019

У меня есть простой канал, где я использую FlatList для загрузки постов, а также страницы, которые загружаются после достижения определенной точки. Какое-то время все идет хорошо, страницы прекрасно загружаются, но через несколько страниц начинает глючить и иногда исчезать.

Я загрузил этот GIF о проблеме https://i.stack.imgur.com/zPhkg.gif

 <SafeAreaView style={Common.container}>
          <FlatList
            ref={ref => {
              this.flatListRef = ref;
            }}
            ListEmptyComponent={<LandingImage />}
            showsVerticalScrollIndicator={false}
            data={this.state.dataSource}
            onEndReached={()=> handleLoadMore(this)}
            onEndReachedThreshold={0.5}
            onRefresh={() => handleRefresh(this)}
            refreshing={this.state.refreshing}
            ItemSeparatorComponent={RenderSeparator}
            renderItem={({item, index}) => this.renderData(item, index)}
            keyExtractor={({item, index}) => index}
          />
          <NewPost
            goCreatePost={() =>
              this.props.navigation.navigate('CreatePost', {
                edit: false,
                refresh: () => handleRefresh(this),
                screen: 'Home',
              })
            }
          />
  </SafeAreaView>

1 Ответ

0 голосов
/ 04 ноября 2019

Если существующие renderItem Компоненты в вашем списке основаны на классах и не должны изменяться при handleLoadMore(), рассмотрите возможность их расширения React.PureComponent вместо React.Component. Это позволяет реагировать, чтобы пропустить повторную визуализацию, пока они остаются мелкими и равными тому, что было до визуализации. Это рекомендуемый способ работы с большими наборами данных, которые не изменяются внутри или содержат переменные вложенные данные.

...