如果屏幕上的本机数据最大，则滚动屏幕时空白列表会空白

Question

我正在使用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()} 
    ) 
}

Answer 1

尝试使用类似这样的东西（以提高性能）：

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