@@ -18,31 +18,31 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
18
18
19
19
render ( ) {
20
20
return (
21
- < ScrollView contentContainerStyle = { { paddingTop : 80 } } >
22
- < View style = { { marginBottom : 10 } } >
21
+ < ScrollView contentContainerStyle = { styles . container } >
22
+ < View style = { styles . segmentContainer } >
23
23
< Text style = { styles . text } > Segmented controls can have values</ Text >
24
24
< SegmentedControlIOS values = { [ 'One' , 'Two' ] } />
25
25
</ View >
26
26
27
- < View style = { { marginBottom : 25 } } >
27
+ < View style = { styles . segmentSection } >
28
28
< SegmentedControlIOS
29
29
values = { [ 'One' , 'Two' , 'Three' , 'Four' , 'Five' ] }
30
30
/>
31
31
</ View >
32
32
33
- < View style = { { marginBottom : 25 } } >
33
+ < View style = { styles . segmentSection } >
34
34
< Text style = { styles . text } >
35
35
Segmented controls can have pre-selected values
36
36
</ Text >
37
37
< SegmentedControlIOS values = { [ 'One' , 'Two' ] } selectedIndex = { 0 } />
38
38
</ View >
39
39
40
- < View style = { { marginBottom : 25 } } >
40
+ < View style = { styles . segmentSection } >
41
41
< Text style = { styles . text } > Segmented controls can be momentary</ Text >
42
42
< SegmentedControlIOS values = { [ 'One' , 'Two' ] } momentary = { true } />
43
43
</ View >
44
44
45
- < View style = { { marginBottom : 25 } } >
45
+ < View style = { styles . segmentSection } >
46
46
< Text style = { styles . text } > Segmented controls can be disabled</ Text >
47
47
< SegmentedControlIOS
48
48
enabled = { false }
@@ -51,7 +51,7 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
51
51
/>
52
52
</ View >
53
53
54
- < View style = { { marginBottom : 10 } } >
54
+ < View style = { styles . segmentContainer } >
55
55
< Text style = { styles . text } > Custom colors can be provided</ Text >
56
56
< SegmentedControlIOS
57
57
tintColor = "#ff0000"
@@ -60,14 +60,14 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
60
60
backgroundColor = "#0000ff"
61
61
/>
62
62
</ View >
63
- < View style = { { marginBottom : 10 } } >
63
+ < View style = { styles . segmentContainer } >
64
64
< SegmentedControlIOS
65
65
tintColor = "#00ff00"
66
66
values = { [ 'One' , 'Two' , 'Three' ] }
67
67
selectedIndex = { 1 }
68
68
/>
69
69
</ View >
70
- < View style = { { marginBottom : 25 } } >
70
+ < View style = { styles . segmentSection } >
71
71
< SegmentedControlIOS
72
72
textColor = "#ff00ff"
73
73
values = { [ 'One' , 'Two' ] }
@@ -77,27 +77,29 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
77
77
78
78
< View >
79
79
< Text style = { styles . text } > Custom colors can be provided</ Text >
80
- < SegmentedControlIOS
81
- values = { this . state . values }
82
- selectedIndex = { this . state . selectedIndex }
83
- onChange = { this . _onChange }
84
- onValueChange = { this . _onValueChange }
85
- />
86
- < Text style = { [ styles . text , { marginTop : 10 } ] } >
80
+ < View style = { styles . segmentContainer } >
81
+ < SegmentedControlIOS
82
+ values = { this . state . values }
83
+ selectedIndex = { this . state . selectedIndex }
84
+ onChange = { this . _onChange }
85
+ onValueChange = { this . _onValueChange }
86
+ />
87
+ </ View >
88
+ < Text style = { [ styles . text ] } >
87
89
Value: { this . state . value } Index: { this . state . selectedIndex }
88
90
</ Text >
89
91
</ View >
90
92
</ ScrollView >
91
93
) ;
92
94
}
93
95
94
- _onChange = event => {
96
+ _onChange = ( event ) => {
95
97
this . setState ( {
96
98
selectedIndex : event . nativeEvent . selectedSegmentIndex ,
97
99
} ) ;
98
100
} ;
99
101
100
- _onValueChange = value => {
102
+ _onValueChange = ( value ) => {
101
103
this . setState ( {
102
104
value : value ,
103
105
} ) ;
@@ -111,4 +113,13 @@ const styles = StyleSheet.create({
111
113
fontWeight : '500' ,
112
114
margin : 10 ,
113
115
} ,
116
+ segmentContainer : {
117
+ marginBottom : 10 ,
118
+ } ,
119
+ segmentSection : {
120
+ marginBottom : 25 ,
121
+ } ,
122
+ container : {
123
+ paddingTop : 80 ,
124
+ } ,
114
125
} ) ;
0 commit comments