首页 > 代码库 > React Native组件之Switch和Picker和Slide

React Native组件之Switch和Picker和Slide

React Native组件Switch类似于iOS中的UISwitch;组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView。他们的使用方法和相关属性如下:

/** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * Switch 开关组件 Picker 选择器 和slide 进度条 */import React, { Component } from ‘react‘;import {    AppRegistry,    StyleSheet,    Text,    View,    Switch,    Picker,    Slider} from ‘react-native‘;class  Project extends Component {  // 构造方法  相当于ES5的getInitialState方法  constructor(props) {    super(props);    // 初始状态    this.state = {      isOn:false,      pickerLabel:‘苹果‘,      slideNum:0    };  }  render() {    return (        <View style={styles.container}>          {/*--------------------------Switch-------------------------------*/}          <Switch              // disabled={true}//是否可以响应,默认为false,true是无法点击              onTintColor=‘blue‘  //开启时的背景颜色              thumbTintColor=‘yellow‘ //开关上原形按钮的颜色              tintColor=‘black‘ //关闭时背景颜色              onValueChange={() => this.setState({isOn: !this.state.isOn})} //当状态值发生变化值回调              value=http://www.mamicode.com/{this.state.isOn == true}//默认状态"苹果" value="http://www.mamicode.com/apple" />                <Picker.Item label="iPhone" value="http://www.mamicode.com/手机" />                <Picker.Item label="苹果1" value="http://www.mamicode.com/apple1" />                <Picker.Item label="iPhone1" value="http://www.mamicode.com/手机1" />                <Picker.Item label="苹果2" value="http://www.mamicode.com/apple2" />                <Picker.Item label="iPhone2" value="http://www.mamicode.com/手机2" />                <Picker.Item label="苹果3" value="http://www.mamicode.com/apple3" />                <Picker.Item label="iPhone3" value="http://www.mamicode.com/手机3" />            </Picker>          {/*--------------------------Slide-------------------------------*/}            <Slider                // {...this.pops} //取到所有的该属性                // disabled = {true} //是否可滑动                // trackImage = {require(‘./img/1.jpg‘)} 滑道背景图片                // maximumTrackImage = {require(‘./img/2.jpg‘)} //滑道右侧侧背景图片                // minimumTrackImage = {require(‘./img/3.jpg‘)}//滑道左侧背景图片                // value = http://www.mamicode.com/{10}  //滑块的初始位置>

  完整源码下载:https://github.com/pheromone/React-Native-1

React Native组件之Switch和Picker和Slide