ReactNative: 使用選擇器組件Picker組件

一、簡介

本系列博客已經介紹過了日期選擇器的使用，日期選擇器是高度封裝的組件，開發者可以選擇最原始的選擇器組件Picker組件進行定制，它是跨平台的組件。Picker組件需要配合Picker.Item組件一起使用。Picker.Item組件是Picker組件的子項，用來設置Picker組件值的。Picker.Item組件可以嵌套多個Picker.Item組件。

 

二、Picker組件API

Picker組件提供的都是靜態屬性，分析每一個屬性的作用如下所示：

//選擇器樣式
style: pickerStyleType

//選中的子項的值
selectedValue: React.PropTypes.any,

//當切換子項時調用
onValueChange: React.PropTypes.func

//選擇器是否能夠交互, 僅限安卓使用
enabled: React.PropTypes.bool

//選擇器模式，枚舉：dialog 對話框  dropdown：下落, 僅限安卓使用
mode: React.PropTypes.oneOf(['dialog', 'dropdown'])

//子項的樣式，僅限iOS使用
itemStyle: itemStylePropType

//在對話框模式下在Android上用作對話框的標題, 僅限安卓使用
prompt: React.PropTypes.string

//組件唯一標識，便於查詢到該組件
testID: React.PropTypes.string

 

三、Picker.Item組件API

Picker.Item組件提供的都是屬性只有幾個，但是非常常用，分析每一個屬性的作用如下所示：

//此項目要顯示的文字
label: React.PropTypes.string.isRequired

//選擇此項目后，傳遞給選擇器的onValueChange回調的值。 可以是字符串或整數。
value: React.PropTypes.any

//此項目要顯示的文字的顏色，僅限安卓使用
color: ColorPropType

//唯一標識
testID: React.PropTypes.string

 

四、使用

看了一下文檔，簡單實現一下，示例如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

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


export default class ReactNativeDemo extends Component {

    //默認選中的值
    state = {
        language:'swift'
    };

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <Picker
                    style={{width:200, height:50}}
                    selectedValue={this.state.language}
                    onValueChange={(lang) => this.setState({language: lang})}>
                    <Picker.Item label="Java" value="java" />
                    <Picker.Item label="JavaScript" value="js" />
                    <Picker.Item label="Swift" value="swift" />
                    <Picker.Item label="Objective-C" value="oc" />
                </Picker>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: 'white'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center',
    }
});

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