React Native Infinite Scroll

ラディスラフM

無限スクロールの最小限の例を取得しようとしました。だから私はこれを持っています:

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()が起動されますが、新しいデータは表示されません。何か案は?

vkurchatkin

常に同じデータでデータソースのクローンを作成するため、新しいものは何も表示されません。これが実際の例です(を介して新しいデータを追加します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',
  },
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

React native start scroll after animation

分類Dev

Infinite scroll in RecyclerView

分類Dev

Ionic 4 Infinite Scroll

分類Dev

Parse HTML Infinite Scroll

分類Dev

React Native-ListView Scroll To Nested Child Ref?

分類Dev

Codeigniter:Ajax infinite scroll with filter

分類Dev

RecyclerView infinite scroll in both directions

分類Dev

Infinite scroll with angularfire2

分類Dev

LitElement infinite scroll reposition issue

分類Dev

iCarousel infinite scroll and index reset

分類Dev

Scroll in React

分類Dev

Scraping an infinite scroll page stops without scrolling

分類Dev

Laravel 5 Paginate + Infinite Scroll jQuery

分類Dev

Infinite Scroll jQuery&Laravel 5 Paginate

分類Dev

How to make godot infinite background scroll

分類Dev

Flutter infinite scroll always reset the view

分類Dev

Tumblr infinite scroll not working with jquery script

分類Dev

Nested ng-repeats, filter and infinite scroll

分類Dev

Make child views or Text view scroll behind SVG shape with transparent background in react-native

分類Dev

How to scroll to result in native javascript?

分類Dev

Jquery not working after page one on website with Infinite Scroll

分類Dev

How to react to scroll down and up?

分類Dev

React simple fetch program run into an infinite loop

分類Dev

Infinite loop when using react hooks

分類Dev

React UseState hook causing infinite loop

分類Dev

React useEffect with property as dependency makes infinite loop

分類Dev

react-infinite-scroll-componentの新しい検索ごとにフェッチされた検索結果を置き換えます

分類Dev

react-infinite-scroll-componentを使用したFirestoreの制限は、指定された制限でのみスクロールします

分類Dev

Material-UI Dialogモーダル内でreact-infinite-scroll-componentを使用するにはどうすればよいですか?

Related 関連記事

  1. 1

    React native start scroll after animation

  2. 2

    Infinite scroll in RecyclerView

  3. 3

    Ionic 4 Infinite Scroll

  4. 4

    Parse HTML Infinite Scroll

  5. 5

    React Native-ListView Scroll To Nested Child Ref?

  6. 6

    Codeigniter:Ajax infinite scroll with filter

  7. 7

    RecyclerView infinite scroll in both directions

  8. 8

    Infinite scroll with angularfire2

  9. 9

    LitElement infinite scroll reposition issue

  10. 10

    iCarousel infinite scroll and index reset

  11. 11

    Scroll in React

  12. 12

    Scraping an infinite scroll page stops without scrolling

  13. 13

    Laravel 5 Paginate + Infinite Scroll jQuery

  14. 14

    Infinite Scroll jQuery&Laravel 5 Paginate

  15. 15

    How to make godot infinite background scroll

  16. 16

    Flutter infinite scroll always reset the view

  17. 17

    Tumblr infinite scroll not working with jquery script

  18. 18

    Nested ng-repeats, filter and infinite scroll

  19. 19

    Make child views or Text view scroll behind SVG shape with transparent background in react-native

  20. 20

    How to scroll to result in native javascript?

  21. 21

    Jquery not working after page one on website with Infinite Scroll

  22. 22

    How to react to scroll down and up?

  23. 23

    React simple fetch program run into an infinite loop

  24. 24

    Infinite loop when using react hooks

  25. 25

    React UseState hook causing infinite loop

  26. 26

    React useEffect with property as dependency makes infinite loop

  27. 27

    react-infinite-scroll-componentの新しい検索ごとにフェッチされた検索結果を置き換えます

  28. 28

    react-infinite-scroll-componentを使用したFirestoreの制限は、指定された制限でのみスクロールします

  29. 29

    Material-UI Dialogモーダル内でreact-infinite-scroll-componentを使用するにはどうすればよいですか?

ホットタグ

アーカイブ