React Native Infinite Scroll

Question

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

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（），但新数据不会出现。有什么想法吗？

Answer 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',
  },
});

Answer 2

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)
    });

Answer 3

我一直在寻找这个解决方案很长一段时间。最后我想出了这个轻量级的库： -

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}
/>

Answer 4

here当前已弃用。您将必须使用ListView或FlatList。您可以在此答案的另一个问题中找到使用FlatList进行无限滚动的示例。 SectionList。