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> ); } }

效果图

属性方法

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 },});

效果图

属性方法

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> ); } }

效果图

属性方法