在React-Native中的ListView末尾显示活动指示器

Question

寻找一种方法,当用户到达终点并且应用程序正在查询来自服务器的更多数据时,将活动指示符附加到ListView的末尾.我可以在ListView之后添加指标,但随后它会显示出来.

Answer 1

您应该能够通过使用onEndReachedA ListView 的prop 来实现这一点.到达最后,您可以渲染加载器.在我的情况下,我曾经renderFooter在列表的底部渲染加载器.在我的场景中

您可以在组件状态中设置一个名称messagesLoading,该属性在您开始获取新数据时设置为true,在完成时设置为false.基于此,您可以在页脚中显示或不显示加载指示器.

此示例部分实现应该让您了解如何执行此操作:

class ThreadDetail extends React.Component {

    constructor () {
        super()
        this.state = {
          loading: false
        }
    }

    loadMoreMessages () {
        this.setState({ loading: true })
        fetchMessagesFromApi()
            .then(() => {
                this.setState({ loading: false })
            })
            .catch(() => {
                this.setState({ loading: false })
            })
    }

    renderFooter () {
        return this.state.loading ? <View><Text>Loading...</Text></View> : null
    }

    render () {
        return <ListView
          renderRow={message => <Message message={message}/>}
          dataSource={this.state.dataSource}
          renderFooter={this.renderFooter.bind(this)}
          onEndReached={this.loadMoreMessages.bind(this)}
          onEndReachedThreshold={10}
          scrollEventThrottle={150} />
    }
}