1. ホーム
  2. React Native
  3. Pickerを使ってみる【これからはじめるReact Native】

Pickerを使ってみる【これからはじめるReact Native】

目次

  1. はじめに
  2. Pickerを使ってみる
  3. まとめ

はじめに

前回はWebViewの使用方法をご紹介しました。

WebViewを使ってみる 【これからはじめるReact Native】


今回は選択肢を回転させながら選択できる、Pickerの使い方をご紹介します。

イメージが湧きづらいと思いますが、このようなものがPickerです。

tst.gif (32.7 kB)

 

Picker

では、今回もExpoで開発していきます。
サンプルコードはこちらです。

ポイントを解説していきます。

まずこちらでPickerコンポーネントをインポートしています。
import { Picker, Text, View, StyleSheet } from 'react-native';

  constructor(props) {
super(props)
this.state = {
job: '',
}
}

次にこちらでstateの初期化を行っています。jobというkeyに値を設定しています。

<Picker
style={[styles.picker]} itemStyle={styles.pickerItem}
selectedValue={this.state.job}
onValueChange={(itemValue) => this.setState({job: itemValue})}
>
<Picker.Item label="アプリ開発" value={1} />
<Picker.Item label="インフラ構築" value={2} />
<Picker.Item label="メディア運営" value={3} />
<Picker.Item label="Webデザイン" value={4} />
</Picker>

selectedValue={this.state.job}
selectedValue というpropsは、選択された値がどの値なのか指定するものです。
わかりづらいかもしれませんが、例えば selectedValue={3}
このようにすると値が3である「メディア運営」がどの値を選んでも選択されます。

onValueChange={(itemValue) => this.setState({job: itemValue})}
onValueChangeはPicker.Itemが選択されたときに発動します。
そして{(itemValue) => this.setState({job: itemValue})} は、itemValueには、その次のPicker.Itemvalueが入ります。
そしてthis.setState({job: itemValue}) で初期化したjobitemValue、つまりPicker.Itemvalueが入る形となります。

  <Picker.Item label="アプリ開発" value={1} />
<Picker.Item label="インフラ構築" value={2} />
<Picker.Item label="メディア運営" value={3} />
<Picker.Item label="Webデザイン" value={4} />

こちらでは、Pickerの選択肢を指定しています。
labelに表示する名前、そしてvalueに設定する値を指定しています。

つまり、まとめるとこのような流れになります。

  1. constructorstateを初期化
  2. PickerItemが選択されるとonValueChangeが走り、statejobvalueが設定される
  3. selectedValueの値にthis.statejob、つまり2で設定されたvalueが設定される(Pickerで選択されたものが表示される)

まとめ

Pickerの動きについてご説明しました。
シンプルな動きですが、stateonValueChangeの動きなどは他のコンポーネントにも応用できる考え方の為、ぜひ理解しておきましょう。
また、iOSやAndroidのOS毎に異なる動きをするものなので、どちらもOSでも確認してみてください。
どのPropsがどのOSに対応しているかはこちらのリファレンスをご参照ください。
Picker 公式リファレンス

Author Profile

eishis
eishis
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。
マーケター・ディレクター・エンジニアなど何でも屋。
COBOLからReactまで色んなことやります。

この記事は
参考になりましたか?

PAGE TOP