react-native
Посмотреть список

Простой пример

ListView - основной компонент, предназначенный для эффективного отображения списков вертикальной прокрутки изменяющихся данных. Минимальным API является создание источника ListView.DataSource, заполнение его простым массивом блоков данных и создание экземпляра компонента ListView с этим источником данных и обратный вызов renderRow, который берет blob из массива данных и возвращает рендерируемый компонент.

Минимальный пример:

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 также поддерживает более сложные функции, включая разделы с заголовками липких разделов, поддержку заголовков и нижних колонтитулов, обратные вызовы при достижении конца доступных данных (onEndReached) и набор строк, которые видны в изменении видового экрана устройства (onChangeVisibleRows), и несколько оптимизаций производительности.

Существует несколько операций с производительностью, обеспечивающих плавное перемещение ListView при динамической загрузке потенциально очень больших (или концептуально бесконечных) наборов данных:

• Только переориентировать измененные строки - функция rowHasChanged, предоставленная источнику данных, сообщает ListView, если необходимо повторно отобразить строку, потому что исходные данные были изменены - более подробную информацию см. В ListViewDataSource.
• Оценка рендеринга с ограничением скорости. По умолчанию для каждого цикла событий создается только одна строка (настраивается с помощью pageSize prop). Это разбивает работу на более мелкие куски, чтобы уменьшить вероятность удаления кадров при рендеринге строк.