RactNativeでPickerを利用する

Webでいうselectとかdropdown的なやつ。コンポーネントを探していたが標準搭載されているみたい。

使い方も特に難しくはない。
とりあえず選択された値がAlertで表示されるようにしてみた。

App.js

import React from 'react';
import { StyleSheet, Text, View, Picker } from 'react-native';

export default class App extends React.Component {

  //選択状態を保存しておくstateを定義しておく
  state = {
    area: 2,
  }

  render() {

    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Picker Demo</Text>
        <Picker
          style={{ width: 200, backgroundColor: '#ffffff' }}
          itemStyle={{ color: 'blue' }}
          selectedValue={this.state.area}
          onValueChange={(value) => {
            this.setState({ area: value }); //これをしないと選択しても標準値に戻ってしまう
            alert(value);
          }}
        >
          <Picker.Item label="東京" value={1} />
          <Picker.Item label="大阪" value={2} />
          <Picker.Item label="福岡" value={3} />
        </Picker>
      </View>
    );
  }
}

余談

開発中iOSエミュレータの動作が遅くなって困った。コードが悪いと思っていたが、どうやらcommand + Tを押してデバックを有効にしたためのようでした（iTermの新規Tabのショートカットとかぶってるので押してしまったのだと思う）。