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={this.state.isOn == true}//默认状态 /> {/*--------------------------Picker-------------------------------*/} <Picker style={{width:100,height:100}} selectedValue = {this.state.pickerLabel} onValueChange = {(e) => this.setState({pickerLabel:e})}> <Picker.Item label="苹果" value="apple" /> <Picker.Item label="iPhone" value="手机" /> <Picker.Item label="苹果1" value="apple1" /> <Picker.Item label="iPhone1" value="手机1" /> <Picker.Item label="苹果2" value="apple2" /> <Picker.Item label="iPhone2" value="手机2" /> <Picker.Item label="苹果3" value="apple3" /> <Picker.Item label="iPhone3" value="手机3" /> </Picker> {/*--------------------------Slide-------------------------------*/} <Slider // {...this.pops} //取到所有的该属性 // disabled = {true} //是否可滑动 // trackImage = {require('./img/1.jpg')} 滑道背景图片 // maximumTrackImage = {require('./img/2.jpg')} //滑道右侧侧背景图片 // minimumTrackImage = {require('./img/3.jpg')}//滑道左侧背景图片 // value = {10} //滑块的初始位置 minimumValue = {0} //最小之 maximumValue = {100} //最大值 step = {2} //步长,在minimumValue和maximumValue之间 maximumTrackTintColor = 'red' //滑道右侧的滑道颜色 minimumTrackTintColor = 'yellow' //滑道左侧的滑道颜色 onSlidingComplete = {(e)=>this.slideDone(e)} //停止滑动时调用,可以把当前值传过去 onValueChange = {(e)=>this.setState({slideNum:e})} //滑动时就调用,可以把当前值传过去 style={{marginTop:200,width:200}} /> <Text>Slide当前值:{this.state.slideNum}</Text> </View> ); } slideDone(e){ alert(e); } } const styles = StyleSheet.create({ container: { marginTop:30, alignItems:'center' } }); AppRegistry.registerComponent('Project', () => Project);