今天我們就講Picker ，顧名思義就是選擇器。用法也是相當的簡單。這裡我們直接就看屬性吧。

Picker 的屬性

• onValueChange function 當選擇器中的某一項被選中的時候進行回撥此函式。回撥時有如下兩個引數：
  
  • itemValue 被選中項的value屬性
  • itemPosition 被選中項所在的索引
• selectedValue any 預設選中的值，可謂字串或者整數
• style pickerStyleType 樣式
• enabled bool android 如果設定為false，就是禁止了選擇器，不可用了
• mode enum(‘dialog’, ‘dropdown’) android 模式為dialog彈框形式，還是下拉選單式的
• prompt string android 設定選擇器的提示字串。在Android的對話方塊模式中用作對話方塊的標題。
• itemStyle itemStylePropType ios 指定應用在每項標籤上的樣式

Picker例項

來看看例項演示的效果圖，如下：

例項程式碼

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

export default class
 
 PickerDemo extends Component {
  state = {
    selected:' ',
    dropdown:' ',
  }
  render() {
    return (
      <View style={styles.container}>
       <Picker
            prompt="彈框Dialog"
            style={styles.picker}
            selectedValue={this.state.selected}
            onValueChange
 
={(value)=>this.onValueChange(1,value)}>
            <Picker.Item label="hello" value="key0" />
            <Picker.Item label="world" value="key1" />
             <Picker.Item label="彈框1" value="key2" />
            <Picker.Item label="彈框2" value="key3" />
          </Picker>
          <Picker
            mode={'dropdown'}
            style={{width:150}}
            selectedValue={this.state.dropdown}
            onValueChange={(value)=>this.onValueChange(2,value)}>
            <Picker.Item label="我是下拉選單1" value="key0" />
            <Picker.Item label="我是下拉選單2" value="key1" />
            <Picker.Item label="我是下拉選單3" value="key2" />
            <Picker.Item label="我是下拉選單4" value="key3" />
          </Picker>
      </View>
    );
  }

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  picker: {
    width: 100,
  },
});

AppRegistry.registerComponent('PickerDemo', () => PickerDemo);

是不是非常簡單，如果感覺非常簡單，那就趕緊動手吧，看看能不能實現一個心中想要實現的漂亮效果呢？

文章原創並首發於我的微信公眾號：非著名程式設計師(smart_android)，也歡迎大家訪問我的個人部落格：http://godcoder.me