react native学习笔记15——Picker、Switch、Slider

本文将介绍三个常用的组件Picker、Switch、Slider，它们都是官方提供的，并且均可以在android与ios渲染对应的原生组件。这三个组件的使用很简单，在实战开发中也很常见，因此这里放在一起介绍。

Picker选择器

Picker选择器，通常可用作下拉菜单，城市选择器等。
其使用方法如下：

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

export default class PickerDemo extends Component {
    constructor(props) {
        super(props);
        this.state ={
            language:null,
        };
    }

    render() {
        return (
            <Picker
                selectedValue={this.state.language}
                onValueChange={(lang) => this.setState({language: lang})}
                style={{width:200}}
            >
                <Picker.Item label="Java" value="java" />
                <Picker.Item label="JavaScript" value="js" />
            </Picker>
        );
    }
}

效果图

属性方法

属性	类型	描述
onValueChange	function	当选择器item被选中时调用，可传两个参数：选择的value和position
selectedValue	any	选择器默认选中的值，可以是字符串或数字
enabled(android)	bool
mode(android)	enum (‘dialog’,’dropdown’)	设置样式, ‘dropdown’下拉样式和’dialog’弹窗样式，默认是dialog
prompt(android)	string	设置Picker标题,并且只有是mode为dialog才会显示
itemStyle(ios)	itemStylePropType	设置每一项的样式

Switch开关按钮

Switch开关，用于开/关两种状态的选择组件。
其使用方法如下：

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

export default class SwitchDemo extends Component {
    constructor(props) {
        super(props);
        this.state ={
            switchState1: true,
            switchState2: false,
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <Switch style={{marginTop:10, marginBottom:10, backgroundColor:'transparent'}}
                        value={this.state.switchState1}
                        onValueChange={ (value) => this.setState({switchState1:value}) }
                        onTintColor='red'
                        thumbTintColor='yellow'
                        tintColor='orange'
                />
                <Switch value={this.state.switchState2}
                        onValueChange={ (value) => this.setState({switchState2:value})}
                />
            </View>
        );
    }
}

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

效果图

属性方法

属性	类型	描述
disabled	bool	是否禁用开关组件，默认是false
onValueChange	function	当组件状态值发生变化的时候回调
value	bool	该开关的值，如果为true呈打开状态，默认false
onTintColor	color	开关开启状态背景颜色
thumbTintColor	color	开关圆形部位的颜色
tintColor	color	开关关闭状态背景颜色

Slider滑动条

Slider滑动条，用于选择一个范围值的组件。
其使用方法如下：

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

export default class SwitchDemo extends Component {
    constructor(props) {
        super(props);
        this.state ={
            value:0,
        };
    }
    render() {
        return (
            <View style={{flex:1}}>
                <Slider />
                <Slider disabled={true}/>
                <Slider value={0.3} maximumTrackTintColor='black'/>
                <Slider value={0.4} minimumTrackTintColor='red'/>
                <Slider value={0.5} style={{borderWidth:1,borderColor:'red'}}/>
                <Text>{this.state.value}</Text>
                <Slider minimumValue={5} maximumValue={20} onValueChange={(value)=>{this.setState({value:value})}} onSlidingComplete={(value)=>{this.setState({value:value})}}/>
                <Slider thumbTintColor="red"  step={0.2}/>
            </View>
        );
    }
}

效果图

属性方法

属性	类型	描述
disabled	bool	是否禁用该组件，默认是false
maximumValue	number	滑动条最大值。默认为1
minimumValue	number	滑动条最小值，默认为0
onSlidingComplete	function	当用户结束滑动的时候回调此方法
onValueChange	function	当用户在滑动过程中持续回调此方法
step	number	滑动条的最小单位。这个值应该在0到(maximumValue - minimumValue)之间。默认为0
value	number	滑动条选择的值。这个值应该在最小值和最大值之间，它们的默认值分别为0和1。默认值为0
thumbImage	Image.propTypes.source	给滑块设置一张图片。只支持静态图片
trackImage	Image.propTypes.source	给轨道设置一张背景图。只支持静态图片。图片最中央的像素会被平铺直至填满轨道
thumbTintColor(android)	ColorPropType	设置圆形部位的颜色