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,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,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	设置圆形部位的颜色