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

来源：互联网发布：域名备案需要主机吗编辑：程序博客网时间：2024/06/05 10:39

本文将介绍三个常用的组件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 设置圆形部位的颜色

阅读全文

0 0