如果Flatlist在反应原生中有最大的数据，则在滚动屏幕时会将其空白

问题描述

卷轴不平滑

滚动最大数据时显示空白。

这是我的示例代码。

componentDidMount() {
    let { page } = this.state;
    this.props.fetchAllItems();
    if (page == 0) {
        page = page + 1;
        this.setState({page: page})
        this.props.fetchItemsPerPage(page);
    }
}

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

_renderFooter(){ return <ActivityIndicator color="#000000" style = {{marginBottom:10, marginTop:10}}/>; }

shouldItemUpdate(){
    return false;
}

renderListItems(){
    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}
            maxToRenderPerBatch={10}
            initialNumToRender = {14}
            shouldComponentUpdate= {this.shouldItemUpdate()}
            onEndReachedThreshold={0.001}
            ListFooterComponent={this._renderFooter}
            legacyImplementation = {true}
            bounces = {false}
            onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}/>
    )
}

render(){
    return(
        {this.renderListItems()} 
    ) 
}

推荐答案

尝试使用以下内容(为了提高性能)：

      getItemLayout={(data, index) => (
      {length: 80, offset: 80 * index, index}
      )}