Pickerの選択肢を可変にする

8339 ワード
react-native expo react-native テキストリンク

やりたいこと

  • Picker.itemを動的に表示したい
  • 例えば、Pickerの選択肢をDBに登録されている内容に応じて変更したい

環境

  • Expo 4.10.1
  • 使用する Picker @react-native-picker/picker

実現方法

  • PickerItemを配列で返す関数で実現する
  • forの代わりに、DBに検索してきた結果でループし、Picker.Itemコンポーネントを要素だけ配列に収め、配列を返す
createSelecter = () => {
    let items = [];
    for(var i = 0; i < 3; i++){
      let test = "選択肢 : "+i
      items.push(<Picker.Item label={test} value="test1" />)
    }
    return items
  }
  • この関数をPicker側で利用する
<Picker
 style={styles.picker}
 selectedValue="test"
 onValueChange={(itemValue, itemIndex) =>
   console.log("itemValue")
 }>
 {this.createSelecter()} <- ここ
</Picker>

例

import React from 'react';
import {Text, View} from 'react-native';
import {Picker} from '@react-native-picker/picker';

class RegisterReason extends React.Component {

createSelecter = () => {
    let items = [];
    for(var i = 0; i < 3; i++){
      let test = "選択肢 : "+i
      items.push(<Picker.Item label={test} value="test1" />)
    }
    return items
}

render() {
    return (
      <View
      style={styles.window}>
        <View style={styles.container}>
            <Picker
              style={styles.picker}
              selectedValue="test"
              onValueChange={(itemValue, itemIndex) =>
                console.log("itemValue")
              }>
              {this.createSelecter()}
            </Picker>
        </View>
      </View>
    );
  }
}