react-native
リストビュー

簡単な例

ListView - 変化するデータの垂直スクロールリストを効果的に表示するために設計されたコアコンポーネントです。最小限のAPIは、ListView.DataSourceを作成し、それにシンプルなデータブロブの配列を取り込み、そのデータソースを使用してListViewコンポーネントをインスタンス化し、データ配列からブロブを取り出しレンダリング可能なコンポーネントを返すrenderRowコールバックをインスタンス化することです。

最小の例：

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を参照してください。
• 速度制限された行のレンダリング - デフォルトでは、イベントループごとに1行だけがレンダリングされます（pageSize propでカスタマイズ可能）。これにより、作業を小さな塊に分割して、行をレンダリングしながらフレームを削除する機会を減らします。