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