読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

React Native のListViewまとめ

頻繁に入れ替えされるデータリストを垂直に表示する時に効果的である。ListViewを利用する際に最低限必要なのは、ListView.DataSourceでblobsの配列を作成して、dataSourceを指定することです。そしてdataSourceで指定したデータリストから各要素をレンダリングするにはrenderRowでcomponentを出力する関数を指定する。

ListViewの最も簡単な例

getInitialState: function(){
var ds = new ListView.DataSource({rowHasChanged: (r1, r2)=> { r1 !== r2 });
return {
  dataSource: ds.cloneWithRows(['foo', 'hoge'])
};
},
render: function() {
return ( 
   <ListView
   dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
   />
);
),

ListViewDataSourceについて

ListViewの要素を効率的に管理する。入力からデータを抽出して、各要素と比較するための関数が組み込まれている。コンストラクタにはリスト操作を効率的にするために工夫としてrowHasChanged関数を利用している。ここではその条件として、rowが変更された時だけ、ListViewが要素を再描画するように指定している。

要素を更新する際にはcloneWithRows関数を呼び出してblob配列を引き渡せばよい。ちなみにpushやpopのような操作は行わない。これはReactが内部で効率的にListViewの要素の更新を行うためで、たとえば特定の要素を更新したい場合は、一回別の変数にListView.DataSourceをコピーしてから、操作を行い、cloneWithRows関数に更新済みのデータを代入する。

要素 引数 説明
dataSource ListViewDataSource ここを参照
renderRow function dataSourceからコンポーネントに引数を 渡してレンダリングを行う。リストビューは特定の行をハイライトすることができる。ハイライトされた行の上下のバーは表示されない。ハイライトを行いたいときにはその度に指定する必要がある。
pageSize number
renderScrollComponent function スクロール可能なコンポーネントを指定する。
renderSeparator function 行あたりのセルの数を指定する。デフォルトでは1
contentContainerStyle ListViewのスタイルを指定する。
scrollRenderAheadDistance どれくらい早くビューが表示されるか指定する。
initialListSize ListViewが最初にレンダリングされるとき、何個の行が表示されるか指定する。