在React-Native中的ListView末尾顯示一個活動指示器

Question

尋找一種方法，當用戶到達最後並且應用程序正在查詢來自服務器的更多數據時，將活動指示器追加到ListView的末尾。我可以在ListView之後添加指標，但它總是顯示出來。

Answer 1

您應該可以通過使用onEndReached支柱來實現A ListView。當你到達最後，你可以渲染加載器。在我的情況下，我使用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} /> 
    } 
}