React Native Elements を学ぶ (2)

前回に引き続き、React Native Elementsについて説明して行きます。

今回のコードの全体はこちらをご参照ください。

リストのクリック機能

さて、まずは下記画面のようにリストをクリックすると次の画面に遷移する機能について。　

リスト項目にクリックイベントを設定するには、<ListItem>のonPressプロパティにクリック時のコールバック関数を渡すだけで実装することができます。リストを表示するコンポーネントのコードは下記のようになっています。

React Native Elementsの使い方(No.2)

リスト項目の作成は、前回説明した通りですが、今回はJSファイルにリストデータを分けて作成をしています。<ListItem>のonPressプロパティにreact-navigationのnavigate関数を設定して画面遷移の実装を行なっています。また、ここではリストデータにnavigateScreenプロパティを設けているリスト項目だけ画面遷移をさせるようにしています。

リストに表示されている「＞」のマークですが、こちらは<ListItem>の標準で表示されます。「＞」のマークを消したい場合は、hideChevron プロパティにtrueを設定すれは良いです。

今回は短いですがここまでにしておきます。次回はスイッチのあるリスト項目、またスライダーについて説明したいと思います。