[英]React Native Infinite Scroll
我試圖得到一個無限滾動的最小例子。 所以我有這個:
var React = require('react-native');
var {
StyleSheet,
View,
Image,
ListView,
} = React;
var data = [
{
"id": 1,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 2,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 3,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 4,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 5,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 6,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
}
];
var InfiniteScreen = React.createClass({
getInitialState: function () {
return {
isLoadingTail: false,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
};
},
componentDidMount: function () {
this.setState({
dataSource: this.getDataSource(data)
});
},
renderRow: function (item) {
return (
<View>
<Image style={{width: 80, height: 80}} source={{uri: 'http:' + item.profile_picture.href}}/>
</View>
);
},
onEndReached: function () {
console.log('onEndReached', this.state.isLoadingTail);
if (this.state.isLoadingTail) {
// We're already fetching
return;
}
this.setState({
isLoadingTail: true
});
this.setState({
isLoadingTail: false,
dataSource: this.getDataSource(data)
});
},
getDataSource: function (users):ListView.DataSource {
return this.state.dataSource.cloneWithRows(users);
},
render: function () {
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
onEndReached={this.onEndReached}
/>
</View>);
}
});
如果我滾動到最底部,則會觸發onEndReached(),但不會顯示新數據。 有任何想法嗎?
您始終使用相同的數據克隆數據源,因此不會顯示任何新內容。 這是一個工作示例(通過concat
添加新數據):
var React = require('react-native');
var {
StyleSheet,
View,
Image,
ListView,
} = React;
var data = [
{
"id": 1,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 2,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 3,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 4,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 5,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
},
{
"id": 6,
"profile_picture": {
"href": "//like1.r.worldssl.net/ui_big/1305634.jpg"
}
}
];
var InfiniteScreen = React.createClass({
getInitialState: function () {
return {
isLoadingTail: false,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
};
},
componentDidMount: function () {
this._data = [];
this.setState({
dataSource: this.getDataSource(data)
});
},
renderRow: function (item) {
return (
<View>
<Image style={{width: 80, height: 80}} source={{uri: 'http:' + item.profile_picture.href}}/>
</View>
);
},
onEndReached: function () {
console.log('onEndReached', this.state.isLoadingTail);
if (this.state.isLoadingTail) {
// We're already fetching
return;
}
this.setState({
isLoadingTail: true
});
this.setState({
isLoadingTail: false,
dataSource: this.getDataSource(data)
});
},
getDataSource: function (users):ListView.DataSource {
this._data = this._data.concat(users);
return this.state.dataSource.cloneWithRows(this._data);
},
render: function () {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
onEndReached={this.onEndReached}
/>
</View>);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
});
https://facebook.github.io/react/docs/component-api.html#setstate
setState()不會立即改變this.state,但會創建掛起狀態轉換。 調用此方法后訪問this.state可能會返回現有值。 無法保證對setState的調用進行同步操作,並且可以對調用進行批處理以提高性能。
所以問題就在這里
this.setState({
isLoadingTail: true
});
this.setState({
isLoadingTail: false,
dataSource: this.getDataSource(data)
});
我一直在尋找這個解決方案很長一段時間。 最后我想出了這個輕量級的庫: -
https://www.npmjs.com/package/rn-infinite-scroll
import InfiniteListView from 'rn-infinite-scroll';
<InfiniteListView
data ={this.state.items}
renderRow={this.renderRow}
canLoad={this.canLoad()}
isLoading={this.state.isLoading}
onLoad={this.onLoad}
/>
ListView目前已棄用。 您必須使用FlatList或SectionList 。 您可以在此答案中找到使用FlatList進行無限滾動的示例,以獲取另一個問題。 https://stackoverflow.com/a/47710224/7477198 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.