React Native: Zoptymalizowana sekcja Section nie jest ponownie tworzona po scrollToLocation

Question

Zbudowałem skruber alfabetyczny, który przewija listę sekcji. SectionList jest zoptymalizowany poprzez użycie getItemLayout. Jeśli przeszmuglowałem alfabet, przewijanie odbywa się zgodnie z planem, ale sekcjaLista nie będzie się powtarzać dopóki nie zwolnię palca z ekranu.

See this expo snack

Anyone pomysły jak rozwiązać ten problem?

Answer 1

Rozwiązano, przechodząc przez kod źródłowy PanResponder. PanResponder ustawia uchwyt interakcji za pośrednictwem InteractionManager. Możesz uzyskać dostęp do tego obsługiwać poprzez this.panResponder.getInteractionHandle() (nieudokumentowanych funkcji), a następnie usuń go za każdym razem przejść do lokalizacji w SectionList:

if (this.panResponder.getInteractionHandle()) { 
    InteractionManager.clearInteractionHandle(
     this.panResponder.getInteractionHandle() 
    ); 
} 

To przeniesie SectionList się w kolejce do wykonywania swoich obliczeń widoczność i tynków.

Proponuję, aby to zoptymalizować, usuwając uchwyt interakcji kilka razy, jak to możliwe, ponieważ InteractionManager jest używany ze względu na wydajność.

Answer 2

Dla sectionList zaktualizować dynamicznie trzeba umieścić dane używając jej do państwa. Ten przykład Expo (zrobione przez kogoś innego), jest dobrym przykładem:

https://snack.expo.io/Syy1bqKxW

Jego panResponder posiada wszystkie dane w państwie i na każdym „handlePanResponderMove” nazywa setstate() do aktualizowania położenia za każdym razem porusza się. Podsumowując, jeśli twoje dane nie są w stanie, nie zaktualizuje się ono dynamicznie. Umieszczenie danych w stanie React-Native polega na dynamicznym śledzeniu zmian danych.

Mam nadzieję, że to pomoże!