Question

就像下拉刷新一样。 Android上的ListView不支持退回。

Answer 1

要在ListView上实现无限滚动，您可以使用onEndReached组件中的renderFooter和ListView。它可能看起来像这样（当renderFooter被触发时你只是onEndReached）

onEndReached() {
    if (!this.state.waiting) {
        this.setState({waiting: true});
        this.fetchData() // fetching new data, ended with this.setState({waiting: false});
    }
}

renderFooter() {
    if (this.state.waiting) {
        return <ActivityIndicator />;
    } else {
        return <Text>~</Text>;
    }
}

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderRow}
      renderFooter={this.renderFooter}
      onEndReached={this.onEndReached}
    />);
}

另一种方法是使用一些库：

我尝试使用remobile，但它已被弃用（而且太复杂了，你必须实现大约4-5方法来满足这个组件）。我使用了FaridSafi，没关系，但刷新是点击，而不是拉动。

Answer 2

@jonzee为该问题提供了完美的解决方案，但根据官方帖子here。 ListView已弃用-使用新的列表组件之一，例如FlatList或SectionList来有限地使用内存，更少的错误，更好的性能，更易于使用的API以及更多功能。请查看此blog post，了解更多详细信息。

所以这与FlatList相同要使用FlatList实现无限加载，您可以使用FlatList组件中的onEndReached和ListFooterComponent。

loadMoreData = () => {
    if (!this.state.fetching_from_server && !this.state.isListEnd) {
    //On click of Load More button We will call the web API again
        this.setState({ fetching_from_server: true }, () => {
            fetch('http://aboutreact.com/demo/getpost.php?offset=' + this.offset)
            //Sending the currect offset with get request
            .then(response => response.json())
            .then(responseJson => {
                if (responseJson.results.length > 0) {
                    //Successful response from the API Call
                    this.offset = this.offset + 1;
                    //After the response increasing the offset for the next API call.
                    this.setState({
                        serverData: [...this.state.serverData, ...responseJson.results],
                        //adding the new data with old one available
                        fetching_from_server: false,
                        //updating the loading state to false
                    });
                } else {
                    this.setState({
                        fetching_from_server: false,
                        isListEnd: true,
                    });
                }
            })
            .catch(error => {
                console.error(error);
            });
        });
    }
};
renderFooter() {
    return (
        <View style={styles.footer}>
            {this.state.fetching_from_server ? (
                <ActivityIndicator color="black" style={{ margin: 15 }} />
            ) : null}
        </View>
    );
}
render() {
    return (
        <View style={styles.container}>
            {this.state.loading ? (
                <ActivityIndicator size="large" />
            ) : (
                <FlatList
                    style={{ width: '100%' }}
                    keyExtractor={(item, index) => index}
                    data={this.state.serverData}
                    onEndReached={() => this.loadMoreData()}
                    onEndReachedThreshold={0.5}
                    renderItem={({ item, index }) => (
                        <View style={styles.item}>
                            <Text style={styles.text}>
                                {item.id}
                                {'.'}
                                {item.title.toUpperCase()}
                            </Text>
                        </View>
                    )}
                    ItemSeparatorComponent={() => <View style={styles.separator} />}
                    ListFooterComponent={this.renderFooter.bind(this)}
                    //Adding Load More button as footer component
                />
            )}
        </View>
    );
}

这是使用FlatList制作无限加载列表的方法。

如何使用ListView for Android在React Native中实现pull up加载更多？

2 个答案: