react-native
ListView

Prosty przykład

ListView - podstawowy komponent zaprojektowany do wydajnego wyświetlania pionowo przewijanych list zmieniających się danych. Minimalnym interfejsem API jest utworzenie ListView.DataSource, zapełnienie go prostą tablicą obiektów blob danych i utworzenie wystąpienia komponentu ListView z tym źródłem danych oraz wywołanie zwrotne renderRow, które pobiera obiekt blob z tablicy danych i zwraca komponent możliwy do renderowania.

Minimalny przykład:

getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
},

ListView obsługuje również bardziej zaawansowane funkcje, w tym sekcje z lepkimi nagłówkami sekcji, obsługę nagłówków i stopek, wywołania zwrotne po osiągnięciu końca dostępnych danych (onEndReached) i na zestawie wierszy, które są widoczne w zmianie rzutni urządzenia (onChangeVisibleRows), oraz kilka optymalizacji wydajności.

Istnieje kilka operacji związanych z wydajnością, które mają na celu płynne przewijanie ListView przy dynamicznym ładowaniu potencjalnie bardzo dużych (lub koncepcyjnie nieskończonych) zestawów danych:

• Ponownie renderuj tylko zmienione wiersze - funkcja rowHasChanged dostarczona do źródła danych informuje ListView, czy musi ponownie renderować wiersz, ponieważ dane źródłowe uległy zmianie - zobacz ListViewDataSource, aby uzyskać więcej informacji.
• Renderowane wiersze z ograniczoną szybkością - domyślnie renderowany jest tylko jeden wiersz na pętlę zdarzeń (dostosowywany za pomocą prop pageSize). Dzieli to pracę na mniejsze części, aby zmniejszyć ryzyko upuszczenia ramek podczas renderowania wierszy.