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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/**
  * 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