如果Flatlist在反应原生中有最大的数据，则在滚动屏幕时会将其空白 [英] Flatlist blanks out while scrolling the screen if it has largest data in react-native

问题描述

我正在使用REACTION-Native-Flat列表滚动来自服务器的最大数据，并获取并显示在我的屏幕上。但在这里我面临着两个问题。

卷轴不平滑

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

这是我的示例代码。

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}
      )}

这篇关于如果Flatlist在反应原生中有最大的数据，则在滚动屏幕时会将其空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！