ReactNative ListView ustawienie początkowej pozycji przewijania po załadowaniu danych

Question

Mam sekcję wydarzeń, która zawiera nagłówki sekcji zawierające datę. Muszę być w stanie przeskoczyć do określonych dat, a także ustawić początkową pozycję przewijania na pierwszą datę w przyszłości.

Aby przeskoczyć do konkretnych dat próbowałem zapisać ich pozycje y w stanie.

renderSectionHeader= (sectionData, sectionID) => (
     <View 
     onLayout={(event) => { 
      const { y } = event.nativeEvent.layout; 
      const sectionPosition = { [sectionID]: y }; 
      const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition); 
      this.setState({ sectionPositions }); 
     }} 
     ... 

wpadłem na problemy z tym podejściem, choć jak renderSectionHeader nie nazywa się na elementach, które są dalej w dół listy (ze względu na leniwe rendering).

Próbowałem następnie matematycznie obliczyć pozycję, ale powoduje to wyświetlenie każdej sekcji na ekranie podczas zbliżania się do podanej daty.

Czy istnieje sposób na osiągnięcie tego, czego potrzebuję?

ZWIĄZANE

React Native ListView: How to scroll to a particular row

https://github.com/facebook/react-native/issues/499

UPDATE

W moim app Znam wszystkie wiersze są dokładnie tej samej wysokości.

Używanie contentOffset={{ y: offsetY }} zamiast setScroll nie działa, ponieważ nadal musi renderować wszystkie elementy do danego elementu do pracy.

Korzystanie z initialListSize={99999999} działa, ale powoduje, że strona jest bardzo wolna i ostrzegano przed jej użyciem.

UPDATE 2

Czy to możliwe, aby zapewnić mój początkowej zawartości do źródła danych, a następnie zaktualizować dane, aby dodać dodatkowe elementy przed i po elementach aktualnie na ekranie?

Czy istnieje biblioteka, której nie znalazłem, co jest potrzebne?

Answer 1

Wygląda na to, że może to wkrótce zostać rozwiązane przez FlatList, który znajduje się obecnie w folderze eksperymentalnym w repozytorium reaktywnym.

https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js

Lepsze ListView - FlatList Podsumowanie: Naprawdę potrzebujemy lepszego widoku listy - tak tutaj jest!

Główne zmiany w stosunku do istniejących ListView:

• przedmioty są „wirtualne”, aby ograniczyć pamięć - czyli elementy spoza okna renderowania są nieoprawione, a ich pamięć jest odzyskiwana. Ten oznacza, że ​​stan instancji nie jest zachowywany, gdy elementy przewijają się od okna renderowania.
• Nie DataSource - tylko prosty data Prop of shape .Domyślnie oczekuje się, że będą one miały kształt {key: string}, ale można zapewnić funkcję niestandardową dla różnych kształtów, np. , na przykład . Dane grafql, w których chcesz mapować id na key. Zauważ, że podległe VirtualizedList jest znacznie bardziej elastyczne.
• Fancy scrollTo funkcjonalność: scrollToEnd, scrollToIndex i scrollToItem oprócz normalnego scrollToOffset.
• Wbudowane wsparcie odciągania i odświeżania - zestaw ustaw rekwizyty onRefresh i refreshing.
• Renderowanie dodatkowych wierszy jest zwykle wykonywane z niskim priorytetem, po zakończeniu wszystkich interakcji/animacji, chyba że niedługo zabraknie nam renderowanej treści. Powinno to pomóc aplikacjom w szybszym reagowaniu.
• Pomocnicze komponenty zastępują funkcje renderowania, np. ItemComponent: ReactClass<{item: Item, index: number}> zastępuje renderRow: (...) => React.Element<*>
• Obsługuje dynamiczne elementy automatycznie za pomocą onLayout lub getItemLayout mogą być dostarczone do podbicia perf i gładsza scrollToIndex i pasek przewijania zachowanie.
• Funkcja callback widoczności zastąpiona jest bardziej wydajnym wywoływaniem widoczności i działa w trybie pionowym i poziomym przynajmniej na systemach Android i iOS, , ale prawdopodobnie także na innych platformach. Dodatkowa moc pochodzi z viewablePercentThreshold, która pozwala klientowi zdecydować, kiedy pozycja powinna być uznana za widoczną.

Demo: