Wyświetl wskaźnik aktywności na końcu listy ListView w React-Native

Question

Szuka sposobu dodania wskaźnika aktywności do końca listy ListView, gdy użytkownik osiągnie koniec, a aplikacja wysyła zapytanie o więcej danych z serwera . Mogę dodać wskaźnik za ListView, ale potem zawsze się pojawi.

Answer 1

Powinieneś być w stanie to osiągnąć, używając propanu onEndReached dla ListView. Gdy dojdziesz do końca, możesz wyrenderować moduł ładujący. W moim przypadku użyłem renderFooter do renderowania programu ładującego u dołu listy. W moim scenariuszu

Możesz ustawić w stanie komponentu atrybut o nazwie messagesLoading, który ustawisz na true, gdy zaczniesz pobierać nowe dane i na false po zakończeniu. Na tej podstawie można wyświetlić wskaźnik ładowania w stopce.

Ten przykład częściowe wdrożenie powinno dać wyobrażenie o tym, jak można to zrobić:

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