React Native组件之Switch和Picker和Slide

Z时代
2024-01-10
分类：综合

react

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