Flatlist 滚动工作不顺畅，并在 react-native 应用程序中滚动 lagelist 时显示空白区域答案

【问题标题】：Flatlist scroll is not working smoothly and shows an empty white space while scrolling a lagelist in react-native appFlatlist 滚动工作不顺畅，并在 react-native 应用程序中滚动 lagelist 时显示空白区域
【发布时间】：2019-10-29 08:19:52
【问题描述】：

我正在使用 react-native-flatlist 网格从服务器滚动最大的数据并获取并显示在我的屏幕上。但是在我的应用程序中滚动并不顺畅。

有什么解决办法吗？

我在滚动屏幕时也面临着一个空白。列表获取消失并在 UI 中显示一个空白区域。

有什么办法吗？

import React, { Component } from 'react';
import {
  ActivityIndicator,
  Image,
  Platform,
  StyleSheet,
  Text,
  FlatList,
  Button,
  View,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  PixelRatio,
  Dimensions,
  StatusBar
} from 'react-native';
import _ from 'lodash';
import ImageCropPicker from 'react-native-image-crop-picker';
import Orientation from 'react-native-orientation';
import FastImage from 'react-native-fast-image';

class MyShowroom extends Component {
  constructor() {
    super();
    this.state = {
      index: 0,
      section: 0,
      width: 0,
      height: 0,
      isPageLoaded: false,
      loadingMoreItems: false,
      lastItemIndex: 0,
      page: 0,
    }
    Orientation.addOrientationListener(this._updateOrientation.bind(this))
  }


        renderList(item) {
            return(
              <TouchableOpacity>
                <View style={{backgroundColor: 'white', alignItems: 'center'}}>
                  <FastImage style={{width: gridWidth, height: gridHeight}}
                    resizeMode={FastImage.resizeMode.contain}
                    source={item.uri}/>
                </View>
              </TouchableOpacity>
            );
          }

    // extra data is rendering from the  redux 
        render(){
          return(
            <FlatList
                          ref={(ref) => { this.flatListRef = ref; }}
                          data={Items}
                          renderItem={({ item }) => this.renderList(item)}
                          numColumns={2}
                          extraData={this.props.pagination}
                          keyExtractor={item => item.id}
                          onEndReached={this._handleMoreItems}
                          onEndReachedThreshold={0.001}
                          ListFooterComponent={this._renderFooter}
                          legacyImplementation = {true}
                          bounces = {false}
                          onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}
                        />
          )
        }

【问题讨论】：

请添加您的代码。 Flatlist 的性能非常好，因此您的代码可能可以优化。
更新了我上面的代码
你能添加整个组件代码吗？
添加了我正在使用的组件
您是否在发布版本上运行过它。有时其他因素，尤其是在开发人员/调试版本中会导致列表运行缓慢。尝试在发布版本上运行它，看看它是否仍然很慢

标签： react-native react-native-flatlist

【解决方案1】：

这是由于 FlatList 组件的性能问题，但您可以将以下道具添加到您的 FlatList 组件，这将有助于解决问题。他们是：一世。删除剪辑的子视图。将此设置为 true，默认值为 false。 ii.窗口大小。将此设置为一个数字，例如 30 三。 maxToRenderPerBatch。这控制了每批渲染的项目数，这是每个滚动上呈现的下一个项目块。

<FlatList
            data={this.state.contacts}
            removeClippedSubviews={true}
            maxToRenderPerBatch={60}
            windowSize={30}
            ListHeaderComponent={headerComponent}
            contentContainerStyle={{ paddingBottom: 10 }}
            renderItem={({ item }) => (
              <View>
                {item}
              </View>
            )}
            numColumns={1}
            keyExtractor={(item, index) => String(index)}
          />

【讨论】：

【解决方案2】：

我也面临着滚动列表时出现空白页的问题。在 flatlist 中添加滚动视图后，现在它工作正常。在这里我的代码请检查可能会有所帮助。

<View style={{ flex: 1}}>
<FlatList
data={data }
renderItem={({ item }) => <this.Item item={item} />}
keyExtractor={item => item.id}
/>

【讨论】：

但是这里不需要添加滚动视图