在React-Native

Question

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

Answer 1

你应该能够通过使用{Listis的onEndReached道具来实现这一点。到达最后，您可以渲染加载器。在我的例子中，我使用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} />
    }
}