小编典典

反应原生无限滚动

reactjs

我试图得到一个无限滚动的最小例子。所以我有这个:

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(),但不会显示新数据。有任何想法吗?


阅读 203

收藏
2020-07-22

共1个答案

小编典典

您总是使用相同的数据克隆数据源,因此不会出现新的情况。这是一个有效的示例(通过添加新数据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',
  },
});
2020-07-22