2018年3月13日

プログラミング

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 公式リファレンス

0

0

AUTHOR

eishis

Eishi Saito 総務

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

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP