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