React Native 交互组件之 Picker

本组件可以在 iOS 和 Android 上渲染原生的选择器（Picker）。

属性

name	type	desc	platform
onValueChange	function	某一项被选中时执行此回调。调用时带有如下参数：itemValue: 被选中项的value属性。 itemPosition: 被选中项在picker中的索引位置
selectedValue	any	默认选中的值。可以是字符串或整数。
style	pickerStyleType	样式风格
enabled	bool	如果设为false，则会禁用此选择器。	Android
mode	enum('dialog', 'dropdown')	在Android上，可以指定在用户点击选择器时，以怎样的形式呈现选项：'dialog': 显示一个模态对话框。默认选项。'dropdown': 以选择器所在位置为锚点展开一个下拉框。	Android
prompt	string	设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。	Android
itemStyle	text styles	指定应用在每项标签上的样式。	iOS

实例

逻辑代码：

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

export default class App extends Component {
  state = {
    sex:' ',
    city : ' ',
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.title_view}>
         <Text style={styles.title_text}>
            Picker 
         </Text>
        </View>
        <View style={styles.item_view}>
          <Text>您性别是：</Text>
          <Picker 
            style={styles.picker}
            prompt = '性别'
            mode = 'dropdown'
            selectedValue = {this.state.sex}
            onValueChange = {(value)=>{
              this.onValueChange(1,value)
          }}>
            <Picker.Item 
             label = '男'
             value = 'man'
            />

           <Picker.Item 
            label = '女'
            value = 'woman'
           />
          </Picker>
        </View>

        <View style={styles.item_view}>
          <Text>您所在的城市是：</Text>
          <Picker 
            style={styles.picker}
            prompt = 'Picker'
            mode = 'dialog'
            selectedValue = {this.state.city}
            onValueChange = {(value)=>{
              this.onValueChange(2,value)
          }}>
            <Picker.Item 
              label = '北京'
              value = 'bj'
            />
            <Picker.Item 
              label = '上海'
              value = 'sh'
            />
            <Picker.Item 
              label = '广州'
              value = 'gz'
            />
            <Picker.Item 
              label = '深圳'
              value = 'sz'
            />
          </Picker>
        </View>
      </View>
    );
  }

  onValueChange = (flag,value) => {
    if(flag ==1){
      this.setState({sex:value});
    }else{
      this.setState({city:value});
    }
    };
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  title_view:{
    flexDirection:'row',
    height:50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
  title_text: {
    fontSize:20,
    color:'white'
  },
  item_view: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  picker: {
    width: 100,
  },

  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

效果图：

picker_demo.jpg