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

　　完整源碼下載：https://github.com/pheromone/React-Native-1