Skip to content

Commit 5f3f260

Browse files
lulutialulutia
committed
refactor(location): remove the style
1 parent 8cd4e7c commit 5f3f260

File tree

6 files changed

+230
-483
lines changed

6 files changed

+230
-483
lines changed

‎app/csetup.js‎

Lines changed: 33 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component, PropTypes} from 'react';
2+
import Icon from 'react-native-vector-icons/FontAwesome';
23
import {
34
View,
45
Text,
@@ -14,10 +15,11 @@ import {
1415
Modal,
1516
} from 'react-native';
1617

17-
1818
import CPickroll from './roll2';
19+
import styles from './style';
1920
let CPicker = Platform.OS === 'ios' ? PickerIOS : CPickroll;
2021
let PickerItem = CPicker.Item;
22+
2123
let height = Dimensions.get('window').height;
2224
let top = height - 250;
2325
let str = '';
@@ -39,6 +41,7 @@ class CPickerroll extends Component {
3941
this._changeAnimateStatus = this._changeAnimateStatus.bind(this);
4042
this.state = this._stateFromProps(props);
4143
this.state.animatedHeight = new Animated.Value(height);
44+
this.state.flex = new Animated.Value(0);
4245
}
4346

4447
_stateFromProps(props){
@@ -70,24 +73,24 @@ class CPickerroll extends Component {
7073
}
7174
}
7275

73-
let selfStyle = props.selfStyle;
74-
let inputStyle = props.inputStyle;
7576
let animationType = props.animationType||'none';
7677
let transparent = typeof props.transparent === 'undefined' ? true:props.transparent;
7778
let visible = typeof props.visible === 'undefined' ? false:props.visible;
7879
let enable = typeof props.enable === 'undefined' ? true:props.enable;
7980
let inputValue = props.inputValue || 'please chose';
81+
let confirmBtnText = props.confirmBtnText || '确定';
82+
let cancelBtnText = props.cancelBtnText || '取消';
8083
return {
81-
selfStyle,
8284
visible,
8385
transparent,
8486
animationType,
8587
enable,
8688
inputValue,
87-
inputStyle,
8889
passData,
8990
selectIndex,
9091
selectedValue,
92+
confirmBtnText,
93+
cancelBtnText,
9194
};
9295
}
9396
_confirmChose(){
@@ -100,6 +103,7 @@ class CPickerroll extends Component {
100103
return str;
101104
}
102105
_cancelChose(){
106+
console.log("nono");
103107
this.state.selectIndex.length=0;
104108
this.state.passData.length = 0;
105109
this.state.selectedValue.length = 0;
@@ -141,13 +145,13 @@ class CPickerroll extends Component {
141145
if(visible){
142146
this.setState({visible: visible});
143147
Animated.timing(
144-
this.state.animatedHeight,
145-
{toValue: top}
148+
this.state.flex,
149+
{toValue: 1}
146150
).start();
147151
}else{
148152
Animated.timing(
149-
this.state.animatedHeight,
150-
{toValue: height}
153+
this.state.flex,
154+
{toValue: 0}
151155
).start(() => this._changeAnimateStatus(type))
152156
}
153157
}
@@ -193,11 +197,9 @@ class CPickerroll extends Component {
193197
render(){
194198

195199
let modalBackgroundStyle = {
196-
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
200+
backgroundColor: 'rgba(0, 0, 0, 0.5)' ,
197201
};
198-
let innerContainerTransparentStyle = this.state.transparent
199-
? {backgroundColor: '#fff', padding: 20}
200-
: null;
202+
let innerContainerTransparentStyle = {backgroundColor: '#fff'};
201203

202204
return (
203205
<View style={styles.container}>
@@ -207,29 +209,31 @@ class CPickerroll extends Component {
207209
visible={this.state.visible}
208210
onRequestClose={() => {this._setModalVisible(false)}}
209211
>
210-
<View style={[styles.modalcontainer, modalBackgroundStyle]}>
211-
<Animated.View style={[styles.innerContainer, innerContainerTransparentStyle,{marginTop:this.state.animatedHeight}]}>
212-
<View style={styles.nav}>
212+
<View style={[styles.modalContainer]}>
213+
<View style={styles.test}></View>
214+
<Animated.View style={[styles.innerContainer,{flex:this.state.flex}]}>
215+
<View style={[styles.nav,this.props.navStyle]}>
213216
<TouchableOpacity style={styles.confirm}>
214217
<Text className={"confirm"} onPress={() => {this. _confirmChose()}}
215-
style={{textAlign:'left',marginLeft:10}} >Confirm</Text>
218+
style={[styles.confirmBtnStyle,this.props.confirmBtnStyle]} >{this.state.confirmBtnText}</Text>
216219
</TouchableOpacity>
220+
<Text style={[styles.pickerName,this.props.pickerNameStyle]}>{this.props.pickerName}</Text>
217221
<TouchableOpacity style={styles.cancel} >
218222
<Text
219223
className={"cancel"}
220-
style={{textAlign:'right',marginRight:10}}
221-
onPress={() => {this._cancelChose()
222-
}}
223-
>Cancel</Text>
224+
onPress={() => {this._cancelChose()}}
225+
style={[styles.cancelBtnStyle,this.props.cancelBtnStyle]}
226+
>{this.state.cancelBtnText}</Text>
224227
</TouchableOpacity>
225228
</View>
226-
<View style={[styles.pickContainer, this.state.selfStyle]} >
229+
<View style={[styles.pickContainer]} >
227230
{this.state.passData.map((item,index) =>{
228231
return(
229232
<CPicker
230233
key = {index}
231234
className = {"test"+index}
232235
style = {{flex:1}}
236+
itemStyle = {{flex:1}}
233237
selectIndex = {this.state.selectIndex[index]}
234238
selectedValue = {this.state.selectedValue[index]}
235239
pickerStyle = {{flex:1}}
@@ -251,15 +255,19 @@ class CPickerroll extends Component {
251255
</Animated.View>
252256
</View>
253257
</Modal>
258+
<View style={[styles.outerInput,this.props.inputStyle]}>
254259
<TextInput
260+
underlineColorAndroid={'transparent'}
255261
editable = {this.state.enable}
256-
style = {[styles.textInput,this.props.inputStyle]}
262+
style = {[styles.textInput,this.props.textStyle]}
257263
ref = 'test'
258-
multiline={ true }
259264
onFocus={() => { this._setEventBegin()}}
260265
placeholder={this.state.inputValue}
261266
value={this.state.inputValue}
262-
/>
267+
/><TouchableOpacity style={styles.iconOuter}onPress={() => { this._setEventBegin()}}>
268+
<Icon style={styles.container2Icon} name="sort-desc" color="grey" size={20}/>
269+
</TouchableOpacity>
270+
</View>
263271
</View>
264272

265273
);
@@ -268,54 +276,7 @@ class CPickerroll extends Component {
268276

269277

270278

271-
let styles = StyleSheet.create({
272-
273-
container: {
274-
justifyContent: 'center',
275-
alignItems: 'center',
276-
},
277-
nav: {
278-
flex: 1,
279-
marginTop:10,
280-
flexDirection: 'row',
281-
height: 28,
282-
alignSelf: 'stretch',
283-
backgroundColor:'white',
284-
},
285-
confirm: {
286-
flex:1,
287-
},
288-
cancel: {
289-
flex:1,
290-
291-
},
292-
pickContainer:{
293-
flex:1,
294-
justifyContent: 'center',
295-
alignSelf:'stretch',
296-
flexDirection:'row',
297-
},
298-
modalcontainer: {
299-
flex: 1,
300-
justifyContent: 'center',
301-
alignItems: 'center',
302-
flexDirection: 'row',
303-
},
304-
innerContainer: {
305-
flex:1,
306-
alignItems: 'center',
307-
justifyContent: 'flex-end',
308-
flexDirection: 'column',
309-
},
310-
textInput:{
311-
padding:10,
312-
borderBottomWidth:1,
313-
borderBottomColor: 'grey',
314-
height: 40,
315-
}
316-
317279

318-
});
319280

320281

321282
export default CPickerroll;

‎app/roll2.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ class CPickroll extends Component {
3636
let selectedIndex = props.selectIndex;
3737
let items = [];
3838
let pickerStyle = props.pickerStyle;
39-
let itemStyle = props.itemStyle;
39+
let itemStyle = props.itemAndroidStyle;
4040
let onValueChange = props.onValueChange;
4141
props.data.map((child,index) =>{
4242
child === props.selectedValue && ( selectedIndex = index );
@@ -172,7 +172,7 @@ class CPickroll extends Component {
172172

173173
return (
174174

175-
<View style={[styles.container, this.state.pickerStyle]} {...this._panResponder.panHandlers}>
175+
<View style={[styles.container, this.state.pickerStyle,{flex:1}]} {...this._panResponder.panHandlers}>
176176

177177
<View style={styles.up}>
178178
<View style={[styles.upView, upViewStyle]} ref={(up) => { this.up = up }} >

‎app/setup3.js‎

Lines changed: 16 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component,PropTypes } from 'react';
2+
import Icon from 'react-native-vector-icons/FontAwesome';
23
import {
34
View,
45
Text,
@@ -16,6 +17,7 @@ import {
1617

1718

1819
import Pickroll from './roll';
20+
import styles from './style';
1921

2022
let PickRoll = Platform.OS === 'ios' ? PickerIOS : Pickroll;
2123
let PickerItem = PickRoll.Item;
@@ -57,10 +59,7 @@ class TMPicker extends Component {
5759
selectedValue.push(Object.keys(item)[selectIndex[index]]);
5860
})
5961
}
60-
let selfStyle = props.selfStyle;
61-
let inputStyle = props.inputStyle;
62-
let confirmBtnStyle = props.confirmBtnStyle;
63-
let cancelBtnStyle = props.cancelBtnStyle;
62+
6463
let animationType = props.animationType||'none';
6564
let transparent = typeof props.transparent==='undefined'?true:props.transparent;
6665
let visible = typeof props.visible==='undefined'?false:props.visible;
@@ -69,19 +68,15 @@ class TMPicker extends Component {
6968
let confirmBtnText = props.confirmBtnText || '确定';
7069
let cancelBtnText = props.cancelBtnText || '取消';
7170
return {
72-
selfStyle,
7371
visible,
7472
transparent,
7573
animationType,
7674
enable,
7775
inputValue,
7876
selectIndex,
7977
selectedValue,
80-
inputStyle,
8178
confirmBtnText,
8279
cancelBtnText,
83-
confirmBtnStyle,
84-
cancelBtnStyle,
8580
};
8681
}
8782
_confirmChose(){
@@ -147,7 +142,7 @@ class TMPicker extends Component {
147142
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
148143
};
149144
let innerContainerTransparentStyle = this.state.transparent
150-
? {backgroundColor: '#fff'}
145+
? {backgroundColor: '#fff',padding:20}
151146
: null;
152147
return (
153148
<View style={styles.container}>
@@ -157,17 +152,18 @@ class TMPicker extends Component {
157152
visible={this.state.visible}
158153
onRequestClose={() => {this._setModalVisible(false)}}
159154
>
160-
<View style={[styles.modalContainer, modalBackgroundStyle]}>
161-
<Animated.View style={[styles.innerContainer, innerContainerTransparentStyle, this.state.selfStyle,{marginTop:this.state.animatedHeight}]}>
155+
<View style={[styles.modalContainer]}>
156+
<Animated.View style={[styles.innerContainer]}>
162157
< View style={styles.nav}>
163158
<TouchableOpacity style={styles.confirm}>
164159
<Text className={"confirm"} onPress={() => {this._confirmChose()}}
165-
style={[{textAlign:'left',marginLeft:10},this.state.confirmBtnStyle]} >{this.state.confirmBtnText}</Text>
160+
style={[{textAlign:'left',marginLeft:10},this.props.confirmBtnStyle]} >{this.state.confirmBtnText}</Text>
166161
</TouchableOpacity>
162+
<Text style={[styles.pickerName,this.props.pickerNameStyle]}>{this.props.pickerName}</Text>
167163
<TouchableOpacity style={styles.cancel} >
168164
<Text
169165
className={"cancel"}
170-
style={[{textAlign:'right',marginRight:10},this.state.cancelBtnStyle]}
166+
style={[{textAlign:'right',marginRight:10},this.props.cancelBtnStyle]}
171167
onPress={() => {this._setModalVisible(false,'cancel')
172168
}}
173169
>{this.state.cancelBtnText}</Text>
@@ -208,63 +204,21 @@ class TMPicker extends Component {
208204
</Animated.View>
209205
</View>
210206
</Modal>
207+
<View style={[styles.outerInput,this.props.inputStyle]}>
211208
<TextInput
209+
underlineColorAndroid={'transparent'}
212210
editable = {this.state.enable}
213-
multiline={ true }
214-
style = {[styles.textInput,this.props.inputStyle]}
211+
style = {[styles.textInput,this.props.textStyle]}
215212
ref = 'test'
216213
onFocus={() => { this._setEventBegin()}}
217214
placeholder={this.state.inputValue}
218215
value={this.state.inputValue}
219-
/>
216+
/><TouchableOpacity style={styles.iconOuter}onPress={() => { this._setEventBegin()}}>
217+
<Icon style={styles.container2Icon} name="sort-desc" color="grey" size={20}/>
218+
</TouchableOpacity>
219+
</View>
220220
</View>
221221
);
222222
}}
223223

224-
225-
let styles = StyleSheet.create({
226-
container: {
227-
justifyContent: 'center',
228-
alignItems: 'center',
229-
},
230-
nav: {
231-
flex: 1,
232-
marginTop:10,
233-
flexDirection: 'row',
234-
height: 28,
235-
alignSelf: 'stretch',
236-
backgroundColor:'white',
237-
},
238-
confirm: {
239-
flex:1,
240-
},
241-
cancel: {
242-
flex:1,
243-
},
244-
pickContainer:{
245-
flex:1,
246-
justifyContent: 'center',
247-
alignSelf:'stretch',
248-
flexDirection:'row',
249-
},
250-
modalContainer: {
251-
flex: 1,
252-
justifyContent: 'center',
253-
alignItems: 'center',
254-
flexDirection: 'row',
255-
},
256-
innerContainer: {
257-
flex:1,
258-
alignItems: 'center',
259-
justifyContent: 'flex-end',
260-
flexDirection: 'column',
261-
},
262-
textInput:{
263-
padding:10,
264-
borderBottomWidth:1,
265-
borderBottomColor: 'grey',
266-
height: 40,
267-
}
268-
});
269-
270224
export default TMPicker;

0 commit comments

Comments
 (0)