如何使用 ListView for Android 在 React Native 中实现上拉加载更多内容? [英] How to implement pull up to load more in React Native using ListView for Android?

问题描述

这就像下拉刷新的反面.Android 上的 ListView 不支持弹跳.

It's like the opposite of pull down to refresh. ListView on Android does not support bounces.

推荐答案

要在 ListView 上实现无限滚动，您可以使用 onEndReached 和 renderFooter来自 ListView 组件.它可能看起来像这样(当 onEndReached 被触发时，您只需 renderFooter)

To achieve infinite scroll on ListView you can use onEndReached and renderFooter from ListView component. It could looks like this (you just renderFooter when onEndReached is triggered)

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

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

Another way is to use some of libraries:

• https://github.com/exponentjs/react-native-infinite-滚动视图
• https://github.com/FaridSafi/react-native-gifted-listview

我尝试过 remobile，但它已被弃用(而且太复杂了，您必须实现大约 4-5 种方法才能满足此组件).我使用了 FaridSafi，没问题，但刷新是点击，而不是拉.

I tried with remobile, but it was deprecated (and too complicated, you have to implement about 4-5 method to satisfy this component). I used FaridSafi, it's ok but refresh is on click, not on pull.

这篇关于如何使用 ListView for Android 在 React Native 中实现上拉加载更多内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！