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.Wyświetl wskaźnik aktywności na końcu listy ListView w React-Native
8
A
Odpowiedz
21
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} />
}
}
Powiązane problemy
- 1. Wskaźnik aktywności w Swift
- 2. Wyświetl pager i listview
- 3. Jak dodać pustą przestrzeń na końcu listy?
- 4. Excel - SUM na końcu listy
- 5. Wskaźnik aktywności na środku paska nawigacyjnego
- 6. ReactNative ListView ustawienie początkowej pozycji przewijania po załadowaniu danych
- 7. Wskaźnik aktywności wyświetlania wewnątrz UIButton
- 8. Wyświetl elementy i tytuły ListView
- 9. Wyświetl wskaźnik pager Jake Wharton
- 10. Jak ustawić wskaźnik aktywności na przycisku niestandardowym w iphone
- 11. dynamiczny podgląd listy dodawanie "Załaduj więcej elementów" na końcu przewijania
- 12. Zapętlenie listy z określonego klucza na końcu listy
- 13. Usuń wskaźnik aktywności buforowania z AVPlayerViewController
- 14. Wskaźnik aktywności miejsca nad dostępnym widokiem
- 15. Jak mogę dodać wskaźnik aktywności poniżej UITableView?
- 16. Animowane elementy listy w ListView
- 17. Dodawanie przycisków do listy aktywności
- 18. Elementy listy wieloliniowej na formancie WinForms ListView?
- 19. Jak odświeżyć odtwarzacz YouTube Wyświetl onItemClickListener() w ListView
- 20. Przyciemnij stronę i wyświetl wskaźnik ładowania.
- 21. ReactNative onResponderRelease nie działa na Androidzie
- 22. ReactNative TextInput niewidoczne iOS
- 23. Filtr listy ListView dla Androida
- 24. Jak uzyskać wartości TextView z listy Wyświetl elementy?
- 25. Jak wyświetlać listy alfabetyczne na stronie Android ListView
- 26. Potrzebujesz pomocy z selektorem kolorów dla zaznaczonej listy Wyświetl elementy
- 27. NSSortDescriptor - push # i numery na końcu listy - iphone xcode
- 28. Czy mogę przenieść opcję na końcu listy wyboru?
- 29. IntelliJ nie zaakceptuje Java8 i diamentów na końcu listy/Mapa
- 30. Jak dodać niestandardowy element listy na końcu jquery autouzupełniania powoduje
to jest dokładnie to! Brakowało mi podpórki 'renderFooter' w dokumentach. Dzięki za tonę! – danseethaler
Musisz zastąpić div widokiem –