SectionList

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Wydajny interfejs do renderowania list z podziałem na sekcje, obsługujący najprzydatniejsze funkcje:

• W pełni wieloplatformowy.

• Konfigurowalne callbacki widoczności.

• Obsługa nagłówka listy.

• Obsługa stopki listy.

• Obsługa separatorów elementów.

• Obsługa nagłówków sekcji.

• Obsługa separatorów sekcji.

• Obsługa różnorodnych danych i renderowania elementów.

• Pull to Refresh (przeciągnij, aby odświeżyć).

• Ładowanie podczas przewijania.

Jeśli nie potrzebujesz podziału na sekcje i chcesz prostszego interfejsu, użyj <FlatList>.

Przykład

Jest to wygodne opakowanie <VirtualizedList>, dlatego dziedziczy jej właściwości (oraz właściwości <ScrollView>) niewymienione tutaj, wraz z następującymi zastrzeżeniami:

• Stan wewnętrzny nie jest zachowywany, gdy treść znika z okna renderowania. Przechowuj wszystkie dane w elementach lub zewnętrznych magazynach jak Flux, Redux czy Relay.

• Jako PureComponent, nie renderuje się ponownie przy płytko równych props. Upewnij się, że wszystkie zależności funkcji renderItem są przekazywane przez właściwość (np. extraData), która nie jest === po aktualizacjach. Dotyczy to także właściwości data i stanu komponentu nadrzędnego.

• Dla oszczędności pamięci i płynności przewijania, treść renderowana jest asynchronicznie poza ekranem. Może to powodować chwilowe puste miejsca przy szybkim przewijaniu. To kompromis dostosowywany do potrzeb aplikacji, nad którym aktywnie pracujemy.

• Domyślnie lista używa właściwości key elementów jako kluczy Reacta. Alternatywnie możesz podać własną funkcję keyExtractor.

---

Dokumentacja

Właściwości

Właściwości VirtualizedList

Dziedziczy właściwości VirtualizedList.

---

Required

renderItem

Domyślna funkcja renderująca dla każdego elementu w każdej sekcji. Może być nadpisana dla poszczególnych sekcji. Powinna zwrócić element Reacta.

Type
function

Funkcja renderująca otrzyma obiekt z następującymi kluczami:

• 'item' (object) - obiekt elementu zdefiniowany w kluczu data tej sekcji

• 'index' (number) - Indeks elementu w sekcji.

• 'section' (object) - Pełny obiekt sekcji zdefiniowany w sections.

• 'separators' (object) - Obiekt z kluczami:

  • 'highlight' (function) - () => void
  • 'unhighlight' (function) - () => void
  • 'updateProps' (function) - (select, newProps) => void
    • 'select' (enum) - możliwe wartości: 'leading', 'trailing'
    • 'newProps' (object)

---

Required

sections

Rzeczywiste dane do renderowania, analogicznie do właściwości data w FlatList.

Type
array of Sections

---

extraData

Właściwość znacznikowa informująca listę o konieczności ponownego renderowania (ponieważ implementuje PureComponent). Jeśli jakakolwiek funkcja renderItem, Header, Footer itp. zależy od czegokolwiek poza właściwością data, umieść to tutaj i traktuj jako niemutowalne.

Type
any

---

initialNumToRender

Liczba elementów renderowanych w początowej partii. Powinna wypełniać ekran, ale nie znacznie więcej. Te elementy nigdy nie są odmontowywane (dla poprawy wydajności przewijania na górę).

Type	Default
number	10

---

inverted

Odwraca kierunek przewijania. Używa transformacji skalowania -1.

Type	Default
boolean	false

---

ItemSeparatorComponent

Renderowany między elementami, ale nie na początku/końcu. Domyślnie przekazywane są właściwości highlighted, section oraz [leading/trailing][Item/Section]. Funkcja renderItem udostępnia separators.highlight/unhighlight aktualizujące właściwość highlighted, ale możesz też dodać własne właściwości przez separators.updateProps. Może to być komponent Reacta (np. SomeComponent) lub element Reacta (np. <SomeComponent />).

Type
component, function, element

---

keyExtractor

Używana do wyciągnięcia unikalnego klucza dla danego elementu w określonym indeksie. Klucz używany jest do cache'owania i jako klucz Reacta śledzący zmianę kolejności. Domyślna funkcja sprawdza kolejno item.key, item.id, a następnie używa indeksu (jak React). Uwaga: ustawia klucze dla elementów, ale każda sekcja nadal potrzebuje własnego klucza.

Type
(item: object, index: number) => string

---

ListEmptyComponent

Renderowany, gdy lista jest pusta. Może to być komponent Reacta (np. SomeComponent) lub element Reacta (np. <SomeComponent />).

Type
component, element

---

ListFooterComponent

Renderowany na samym końcu listy. Może to być komponent Reacta (np. SomeComponent) lub element Reacta (np. <SomeComponent />).

Type
component, element

---

ListHeaderComponent

Renderowany na samym początku listy. Może to być komponent Reacta (np. SomeComponent) lub element Reacta (np. <SomeComponent />).

Type
component, element

---

onRefresh

Jeśli podana, standardowy RefreshControl zostanie dodany dla funkcji "Pull to Refresh". Upewnij się też o poprawnym ustawieniu właściwości refreshing. Aby przesunąć RefreshControl od góry (np. o 100 punktów), użyj progressViewOffset={100}.

Type
function

---

onViewableItemsChanged

Wywoływana, gdy zmienia się widoczność wierszy, zgodnie z definicją we właściwości viewabilityConfig.

Type
(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void

---

refreshing

Ustaw na true podczas oczekiwania na nowe dane przy odświeżaniu.

Type	Default
boolean	false

---

removeClippedSubviews

ostrzeżenie

Użycie tej właściwości może prowadzić do błędów (brakującej treści) w niektórych okolicznościach - używasz na własne ryzyko.

Gdy true, widżety potomne znajdujące się poza ekranem są usuwane z natywnego widoku nadrzędnego. Może to poprawić wydajność przewijania w przypadku dużych list. Domyślnie na Androidzie wartość ta wynosi true.

Type
boolean

---

renderSectionFooter

Renderowany u dołu każdej sekcji.

Type
(info: {section: Section}) => element ｜ null

---

renderSectionHeader

Renderowany u góry każdej sekcji. Domyślnie przyklejają się do góry ScrollView na iOS. Zobacz stickySectionHeadersEnabled.

Type
(info: {section: Section}) => element ｜ null

---

SectionSeparatorComponent

Renderowany u góry i dołu każdej sekcji (uwaga: różni się od ItemSeparatorComponent, który pojawia się tylko między elementami). Służy do oddzielania sekcji od nagłówków powyżej i poniżej, zwykle z identyczną reakcją na podświetlenie jak ItemSeparatorComponent. Otrzymuje także highlighted, [leading/trailing][Item/Section] oraz dowolne niestandardowe właściwości z separators.updateProps.

Type
component, element

---

stickySectionHeadersEnabled

Przykleja nagłówki sekcji do górnej krawędzi ekranu do momentu, aż następny nagłówek je zastąpi. Domyślnie włączone tylko na iOS, zgodnie ze standardem tej platformy.

Type	Default
boolean	false Android true iOS

Metody

flashScrollIndicators()

iOS

tsx

flashScrollIndicators();

Wyświetla tymczasowo wskaźniki przewijania.

---

recordInteraction()

tsx

recordInteraction();

Informuje listę o wystąpieniu interakcji (np. dotknięcie elementu), co powinno uruchomić obliczenia widoczności, szczególnie gdy waitForInteractions ma wartość true i użytkownik nie przewinął jeszcze listy. Zwykle wywoływane przez kliknięcia elementów lub akcje nawigacyjne.

---

scrollToLocation()

tsx

scrollToLocation(params: SectionListScrollParams);

Przewija do elementu o podanych sectionIndex i itemIndex (w sekcji), pozycjonując go w widocznym obszarze zgodnie z viewPosition: wartość 0 umieszcza go u góry (może być przykryty przyklejonym nagłówkiem), 1 na dole, 0.5 na środku.

uwaga

Bez podania właściwości getItemLayout lub onScrollToIndexFailed nie można przewinąć do lokalizacji poza aktualnym oknem renderowania.

Parametry:

Name	Type
params Required	object

Prawidłowe klucze w params:

• 'animated' (boolean) - Czy lista powinna animować się podczas przewijania. Domyślnie true.

• 'itemIndex' (number) - Indeks elementu w sekcji. Wymagane.

• 'sectionIndex' (number) - Indeks sekcji zawierającej element. Wymagane.

• 'viewOffset' (number) - Stałe przesunięcie w pikselach od docelowej pozycji (np. dla kompensacji przyklejonych nagłówków).

• 'viewPosition' (number) - Wartość 0 umieszcza element u góry, 1 na dole, 0.5 na środku.

Definicje Typów

Sekcja

Obiekt identyfikujący dane do renderowania dla danej sekcji.

Type
any

Właściwości:

Name	Type	Description
data Required	array	The data for rendering items in this section. Array of objects, much like FlatList's data prop.
key	string	Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default.
renderItem	function	Optionally define an arbitrary item renderer for this section, overriding the default renderItem for the list.
ItemSeparatorComponent	component, element	Optionally define an arbitrary item separator for this section, overriding the default ItemSeparatorComponent for the list.
keyExtractor	function	Optionally define an arbitrary key extractor for this section, overriding the default keyExtractor.