React Nativeでドロップダウンを表示する方法【Pickerコンポーネント徹底解説】

React NativeのPickerコンポーネントとは？

React NativeのPickerコンポーネントは、いわゆる「ドロップダウン」に相当するUIパーツです。あらかじめ用意された複数の選択肢の中から、ユーザーがひとつの値を選択するために使います。

基本構文

Pickerコンポーネントの基本的な記述方法は以下のとおりです。

<Picker selectedValue = {selectedelement} onValueChange = {updatefunc}>
   <Picker.Item label = "ItemLabel" value = "ItemValue" />
   <Picker.Item label = "ItemLabel" value = "ItemValue" />
</Picker>

Pickerを使用するには、まずreact-nativeからインポートする必要があります。

import { Picker } from 'react-native'

Pickerの主なプロパティ

実装例：Pickerでドロップダウンを表示する

ここでは、Pickerコンポーネントを使ってドロップダウンを表示する具体的な例を紹介します。

まず、JSX部分のコードは以下のとおりです。

<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
  <Picker.Item label = "Steve" value = "steve" />
  <Picker.Item label = "Ellen" value = "ellen" />
  <Picker.Item label = "Maria" value = "maria" />
</Picker>

この例では、「Steve」「Ellen」「Maria」の3つの選択肢をPickerに設定しています。続いて、アプリ全体のコードを見てみましょう。

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class PickerExample extends Component {
  state = {user: ''}
  updateUser = (user) => {
    this.setState({ user: user })
  }
  render() {
    return (
      <View>
        <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
        <Picker.Item label = "Steve" value = "steve" />
        <Picker.Item label = "Ellen" value = "ellen" />
        <Picker.Item label = "Maria" value = "maria" />
        </Picker>
      <Text style = {styles.text}>{this.state.user}</Text>
        </View>
      )
    }
  }
  export default PickerExample
  const styles = StyleSheet.create({
  text: {
    fontSize: 30,
    alignSelf: 'center',
    color: 'red'
  }
})

this.state.userがピッカーの状態管理に使われています。ユーザーが項目を選択するとupdateUser関数が呼び出され、stateが更新されて、選択した値が画面下部のテキストにリアルタイムで反映される仕組みです。

実行結果

アプリを実行すると、最初は以下のように何も選択されていない状態で表示されます。

ピッカーをタップして開くと、登録済みの名前の一覧が次のように表示されます。

補足：新しいバージョンでの注意点

なお、React Native本体のPickerコンポーネントはバージョン0.59以降、コアライブラリから分離されました。現在の開発では、コミュニティが提供する@react-native-picker/pickerパッケージをインストールして利用するのが推奨されています。ただし基本的な使い方は変わらないため、上記のコードを参考にしながらインポート元を変更するだけで簡単に対応できます。