首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。