ReactNativeでドロップダウンを表示するにはどうすればよいですか？

React Native Pickerコンポーネントは、指定された複数のオプションから値を選択できるドロップダウンに似ています。

基本的なピッカーコンポーネントは次のとおりです-

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

ピッカーコンポーネントを操作するには、最初に次のようにreact-nativeからインポートする必要があります-

import { Picker } from 'react-native'

ピッカーのプロパティ

例：ReactNativeでピッカーを使用したドロップダウンの表示

この例は、ピッカーコンポーネントを使用したドロップダウンを示しています。

コードは次のとおりです-

<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>

Picker Steve、Ellen、Mariaには3つの値が与えられています。これを表示するための完全なコードは次のとおりです。

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関数は、ユーザーが選択されたときにトリガーされます。

出力

ピッカーから名前を開くと、次のように表示されます-