mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit a00f4b118757f30e046efabbb9b9d0839414dcb9 1 parent 319d268a

秒杀UI优化 review by 草莓

Inline Side-by-side
Showing 7 changed files with 343 additions and 83 deletions
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import TimeForWait from './TimeForWait';
import TimeForNow from './TimeForNow';
import TimeForOver from './TimeForOver';
export default class TimeForFocus extends Component {
constructor(props) {
super(props);
}
render() {
let {
time,
now,
over,
wait,
tickTimeOut,
tickHour,
tickMinute,
tickSecond,
} = this.props;
let colorStyle = {color: '#3e3e3e'};
let TimeComponent = null;
if (now) {
TimeComponent = TimeForNow;
} else if (over) {
TimeComponent = TimeForOver;
} else if (wait) {
TimeComponent = TimeForWait;
}
return (
<View style={styles.rowContainerFocus}>
{TimeComponent ?
<TimeComponent
time={time}
tickTimeOut={tickTimeOut}
tickHour={tickHour}
tickMinute={tickMinute}
tickSecond={tickSecond}
/>
: null}
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let backgroundHeight = 61;
let rowContainerFocusWidth = Math.ceil((294 * width) / 750);
let styles = StyleSheet.create({
rowContainerFocus: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: rowContainerFocusWidth,
height: backgroundHeight,
backgroundColor:'white',
},
});
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
export default class TimeForLostFocus extends Component {
constructor(props) {
super(props);
}
render() {
let {
time,
now,
over,
wait,
} = this.props;
let colorStyle = {color: '#3e3e3e'};
let text = '';
if (now) {
text = '抢购中';
} else if (over) {
text = '已开抢';
} else if (wait) {
text = '即将开抢';
}
return (
<View style={styles.rowContainer}>
<Text style={[colorStyle, {fontSize: 13}]}>{time}</Text>
<Text style={[colorStyle, {fontSize: 10}]}>{text}</Text>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let backgroundHeight = 61;
let rowContainerWidth = Math.ceil((223 * width) / 750);
let styles = StyleSheet.create({
rowContainer: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: rowContainerWidth,
height: backgroundHeight,
backgroundColor:'white',
},
});
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import TimeNumber from './TimeNumber';
export default class TimeForNow extends Component {
constructor(props) {
super(props);
}
render() {
let {
time,
tickTimeOut,
tickHour,
tickMinute,
tickSecond,
} = this.props;
let colorStyle = {color: '#d30018'};
return (
<View style={styles.rowContainerFocus}>
<Text style={[colorStyle,{fontSize: 13}]}>{time} 抢购中</Text>
{tickTimeOut ? null :
<View style={styles.tickTimeContainer}>
<Text style={colorStyle}>剩余:</Text>
<TimeNumber text={tickHour} />
<TimeNumber text={tickMinute} />
<TimeNumber text={tickSecond} />
</View>}
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let backgroundHeight = 61;
let rowContainerFocusWidth = Math.ceil((294 * width) / 750);
let styles = StyleSheet.create({
rowContainerFocus: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: rowContainerFocusWidth,
height: backgroundHeight,
backgroundColor:'white',
},
tickTimeContainer: {
flexDirection: 'row',
},
});
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
} from 'react-native';
import Immutable, {Map} from 'immutable';
export default class TimeForOver extends Component {
constructor(props) {
super(props);
}
render() {
let {
time,
} = this.props;
let colorStyle = {color: '#d30018'};
return (
<Text style={[colorStyle, {fontSize: 13}]}>{time} 已开抢</Text>
);
}
}
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import TimeNumber from './TimeNumber';
export default class TimeForWait extends Component {
constructor(props) {
super(props);
}
render() {
let {
time,
tickTimeOut,
tickHour,
tickMinute,
tickSecond,
} = this.props;
let colorStyle = {color: '#d30018'};
return (
<View style={styles.rowContainerFocus}>
<Text style={[colorStyle,{fontSize: 13}]}>{time} 即将开抢</Text>
{tickTimeOut ? null :
<View style={styles.tickTimeContainer}>
<Text style={[colorStyle, {fontSize: 10}]}>距开抢:</Text>
<TimeNumber text={tickHour} />
<TimeNumber text={tickMinute} />
<TimeNumber text={tickSecond} />
</View>}
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let backgroundHeight = 61;
let rowContainerFocusWidth = Math.ceil((294 * width) / 750);
let styles = StyleSheet.create({
rowContainerFocus: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: rowContainerFocusWidth,
height: backgroundHeight,
backgroundColor:'white',
},
tickTimeContainer: {
flexDirection: 'row',
},
});
... ...
... ... @@ -11,6 +11,8 @@ import ReactNative, {
TouchableOpacity,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import TimeForFocus from './TimeForFocus';
import TimeForLostFocus from './TimeForLostFocus';
let diff;
... ... @@ -130,7 +132,6 @@ export default class SeckillTimeListView extends Component {
console.log('rowID');
console.log(rowID);
rowData = rowData.toJS();
let colorStyle = rowData.focus ? {color: '#d30018'} : {color: '#3e3e3e'};
return (
<TouchableOpacity activeOpacity={1.0} onPress={() => {
if (rowData.focus) {
... ... @@ -142,56 +143,24 @@ export default class SeckillTimeListView extends Component {
this._scrollToFocusActivity();
this.props.onPressTimeItem && this.props.onPressTimeItem(rowData);
}}>
{rowData.focus ?
<View key={'row' + rowID} style={styles.rowContainerFocus}>
{rowData.now ?
<View key={'row' + rowID} style={styles.rowContainerFocus}>
<Text style={[colorStyle,{fontSize: 13}]}>{rowData.time} 抢购中</Text>
{!this.state.tickTimeOut ?
<View style={styles.tickTimeContainer}>
<Text style={colorStyle}>剩余:</Text>
<View style={styles.tickTime}>
<Text style={styles.tickTimeText}>{this.state.tickHour}</Text>
</View>
<View style={styles.tickTime}>
<Text style={styles.tickTimeText}>{this.state.tickMinute}</Text>
</View>
<View style={styles.tickTime}>
<Text style={styles.tickTimeText}>{this.state.tickSecond}</Text>
</View>
</View>
: null}
</View>
: null}
{rowData.over ? <Text style={[colorStyle,{fontSize: 13}]}>{rowData.time} 已开抢</Text> : null}
{rowData.wait ?
<View key={'row' + rowID} style={styles.rowContainerFocus}>
<Text style={[colorStyle,{fontSize: 13}]}>{rowData.time} 即将开抢</Text>
{!this.state.tickTimeOut ?
<View style={styles.tickTimeContainer}>
<Text style={[colorStyle,{fontSize: 10}]}>距开抢:</Text>
<View style={styles.tickTime}>
<Text style={styles.tickTimeText}>{this.state.tickHour}</Text>
</View>
<View style={styles.tickTime}>
<Text style={styles.tickTimeText}>{this.state.tickMinute}</Text>
</View>
<View style={styles.tickTime}>
<Text style={styles.tickTimeText}>{this.state.tickSecond}</Text>
</View>
</View>
: null}
</View>
: null}
</View>
:<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={[colorStyle,{fontSize: 13}]}>{rowData.time}</Text>
{rowData.now ? <Text style={[colorStyle,{fontSize: 10}]}>抢购中</Text> : null}
{rowData.over ? <Text style={[colorStyle,{fontSize: 10}]}>已开抢</Text> : null}
{rowData.wait ? <Text style={[colorStyle,{fontSize: 10}]}>即将开抢</Text> : null}
</View>
{rowData.focus ? <TimeForFocus
key={'row' + rowID}
time={rowData.time}
now={rowData.now}
over={rowData.over}
wait={rowData.wait}
tickTimeOut={this.state.tickTimeOut}
tickHour={this.state.tickHour}
tickMinute={this.state.tickMinute}
tickSecond={this.state.tickSecond}
/> : <TimeForLostFocus
key={'row' + rowID}
time={rowData.time}
now={rowData.now}
over={rowData.over}
wait={rowData.wait}
/>
}
</TouchableOpacity>
... ... @@ -260,39 +229,6 @@ let styles = StyleSheet.create({
flexDirection: 'row',
backgroundColor:'white',
},
rowContainer: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: rowContainerWidth,
height: backgroundHeight,
backgroundColor:'white',
},
rowContainerFocus: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: rowContainerFocusWidth,
height: backgroundHeight,
backgroundColor:'white',
},
tickTimeContainer: {
flexDirection: 'row',
},
tickTime: {
backgroundColor:'#d30018',
alignItems: 'center',
justifyContent: 'center',
left:0,
marginLeft:5,
width:15,
height:15,
borderRadius:3,
},
tickTimeText: {
color: 'white',
fontSize: 9,
},
bottomToolBar: {
top: 200,
height: 44,
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
StyleSheet,
} from 'react-native';
export default class TimeNumber extends Component {
constructor(props) {
super(props);
}
render() {
let {
text,
} = this.props;
return (
<View style={styles.tickTime}>
<Text style={styles.tickTimeText}>{text}</Text>
</View>
);
}
}
let styles = StyleSheet.create({
tickTime: {
backgroundColor:'#d30018',
alignItems: 'center',
justifyContent: 'center',
left:0,
marginLeft:5,
width:15,
height:15,
borderRadius:3,
},
tickTimeText: {
color: 'white',
fontSize: 9,
},
});
... ...