如果屏幕上的React-Native数据最多,则Flatlist在滚动屏幕时会空白

我正在使用react-native-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()} 
    ) 
}
liuchangqi 回答:如果屏幕上的React-Native数据最多,则Flatlist在滚动屏幕时会空白

尝试使用类似的方法(以提高性能):

      getItemLayout={(data,index) => (
      {length: 80,offset: 80 * index,index}
      )}
本文链接:https://www.f2er.com/3167172.html

大家都在问