Environment
Environment:
OS: macOS High Sierra 10.13.4
Node: 8.11.3
Yarn: 1.9.2
npm: 5.6.0
Watchman: 4.6.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4720617
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.5 => 0.55.4
Description
In my application. This list contains more than 900 data. I load it by paging, loading ten data at a time. When I keep pulling up and unloading hundreds of pieces of data, then pulling down to look at the data above will cause problems in the picture.
A large blank area will appear in the picture above, which will affect the experience very much. Do you have any solutions? Or this is a bug
Reproducible Demo
I'm sorry I can't provide the application package. But I provided some of the code
<FlatList loading={!this.state.isInitAll} ListEmptyComponent={this.state.list.length === 0 && !this.state.refreshIng?NoData:(<View/>)} ItemSeparatorComponent={() => { return (<View style={{height: 5, backgroundColor: '#f0f0f0'}} />) }} onEndReached={()=>{ if (!this.state.isInitAll) { this.getListData('plus'); } }} onEndReachedThreshold={0.02} onRefresh={() => { this.getListData('refresh'); }} refreshing={this.state.refreshIng} data={this.state.list} renderItem={this.renderListItem.bind(this)} />
getListData(type) { let promise1 = new Promise((resolve) => { if (type === 'init' || type === 'refresh') { this.setState({ pageNo: 1, searchName: '', isInitAll: false, }, () => { resolve(); }); } else if (type === 'plus') { this.setState({ pageNo: this.state.pageNo + 1, searchName: '', }, () => { resolve(); }); } else if (type === 'search') { this.setState({ pageNo: 1, isInitAll: false, }, () => { resolve(); }); } });
`promise1.then(() => {
let {pageNo, pageSize} = this.state;
let query = {
current: pageNo,
size: pageSize,
};
if (this.code) {
query.code = this.code;
}
if (this.topicName) {
query.topicName = this.topicName;
}
if (this.code === 'bf') {
query.topicName = '部分'
}
let promise = request('/api/**/**', {
query: query,
method : 'get',
});
this.setState({refreshIng: true});
setTimeout(() => {
this.setState({refreshIng: false});
}, 5100);
promise.then(({data}) => {
this.setState({refreshIng: false});
let {records, last} = data;
let arr = [];
if (type === 'init' || type === 'refresh') {
arr = [];
this.setState({isInitAll: false});
} else if (type === 'plus') {
arr = this.state.list;
}
if (records instanceof Array) {
records.forEach((val) => {
arr.push({
key: val.id,
name: val.userName?val.userName:'',
message: val.message?val.message:'',
time: getTime(val.createdAt),
discussCount: val.discussCount,
images: [],
discusses: [],
})
});
}
if (last) {
this.setState({isInitAll: true});
}
this.setState({list: arr});
}).catch(() => {
this.setState({refreshIng: false});
});
});
}`
Environment
Environment:
OS: macOS High Sierra 10.13.4
Node: 8.11.3
Yarn: 1.9.2
npm: 5.6.0
Watchman: 4.6.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4720617
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.5 => 0.55.4
Description
In my application. This list contains more than 900 data. I load it by paging, loading ten data at a time. When I keep pulling up and unloading hundreds of pieces of data, then pulling down to look at the data above will cause problems in the picture.
A large blank area will appear in the picture above, which will affect the experience very much. Do you have any solutions? Or this is a bug
Reproducible Demo
I'm sorry I can't provide the application package. But I provided some of the code
<FlatList loading={!this.state.isInitAll} ListEmptyComponent={this.state.list.length === 0 && !this.state.refreshIng?NoData:(<View/>)} ItemSeparatorComponent={() => { return (<View style={{height: 5, backgroundColor: '#f0f0f0'}} />) }} onEndReached={()=>{ if (!this.state.isInitAll) { this.getListData('plus'); } }} onEndReachedThreshold={0.02} onRefresh={() => { this.getListData('refresh'); }} refreshing={this.state.refreshIng} data={this.state.list} renderItem={this.renderListItem.bind(this)} />getListData(type) { let promise1 = new Promise((resolve) => { if (type === 'init' || type === 'refresh') { this.setState({ pageNo: 1, searchName: '', isInitAll: false, }, () => { resolve(); }); } else if (type === 'plus') { this.setState({ pageNo: this.state.pageNo + 1, searchName: '', }, () => { resolve(); }); } else if (type === 'search') { this.setState({ pageNo: 1, isInitAll: false, }, () => { resolve(); }); } });