Mostrare un indicatore di attività alla fine di un controllo ListView in React-Native

Question

Cercare un modo per aggiungere un indicatore di attività alla fine di un controllo ListView quando l'utente ha raggiunto la fine e l'app richiede ulteriori dati da un server . Posso aggiungere l'indicatore dopo ListView, ma poi viene sempre visualizzato.

Answer 1

Si dovrebbe essere in grado di ottenere ciò utilizzando il puntello onEndReached per A ListView. Quando raggiungi la fine, puoi eseguire il rendering del caricatore. Nel mio caso ho usato renderFooter per rendere il loader in fondo alla lista. Nel mio scenario

È possibile impostare nello stato del componente un attributo denominato messagesLoading impostato su true quando si avvia il recupero di nuovi dati e su false al termine. Sulla base di ciò, è possibile visualizzare o meno l'indicatore di caricamento nel piè di pagina.

implementazione

Questo esempio parziale dovrebbe darvi un'idea di come si può fare:

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