Skip to content

Commit e5765ea

Browse files
breitningbreitning
committed
handle some page detail
1 parent 84d207f commit e5765ea

File tree

8 files changed

+281
-151
lines changed

8 files changed

+281
-151
lines changed

‎source/common/index.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,14 @@ export function getRandomColor(){
1818
}
1919

2020
export function getBloggerAvatar(avatarUri){
21-
if (avatarUri && avatarUri!="https://pic.cnblogs.com/face/" &&!_.endsWith(avatarUri, ".gif")) {
21+
if (avatarUri != "https://pic.cnblogs.com/face/") {
22+
return avatarUri;
23+
}
24+
return Config.appInfo.avatar;
25+
}
26+
27+
export function getBloggerHdpiAvatar(avatarUri){
28+
if (avatarUri && !_.endsWith(avatarUri, ".gif")) {
2229
avatarUri = avatarUri.replace(/face/, 'avatar');
2330
avatarUri = avatarUri.replace(/avatar\/u/, 'avatar\/a');
2431
return avatarUri;

‎source/component/drawerPanel.js

Lines changed: 111 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {
33
View,
44
Text,
55
Image,
6+
StyleSheet,
7+
TouchableOpacity,
68
TouchableHighlight
79
} from 'react-native';
810

@@ -45,94 +47,124 @@ class DrawerPanel extends Component {
4547
TimerMixin.clearTimeout(this.timer);
4648
}
4749

48-
renderHeader(){
49-
let { router } = this.props;
50+
renderHeaderBackground(){
5051
return (
51-
<View style={ ComponentStyles.header }>
52+
<View>
5253
<Image
53-
style={ ComponentStyles.headerBg }
54+
style={ ComponentStyles.header_img }
5455
resizeMode="stretch"
5556
source={ {uri:backgroundImageSource} }>
56-
<View style={ CommonStyles.headerBackgroundMask }/>
57-
<View style={ ComponentStyles.headerContent }>
58-
<Image
59-
style={ ComponentStyles.headerAvatar }
60-
source={{uri:"http://123.56.135.166/cnblog/public/img/common/author.jpg"}}/>
61-
<View style={ ComponentStyles.headerText}>
62-
<Text style={ ComponentStyles.headerName}>
63-
愤怒的晃晃
64-
</Text>
65-
<Text style={ ComponentStyles.headerDate}>
66-
个人中心
67-
</Text>
68-
</View>
69-
</View>
7057
</Image>
71-
58+
<View style={ ComponentStyles.header_backdrop }/>
7259
</View>
7360
)
7461
}
7562

76-
renderItem(item, index){
77-
78-
if (item.flag === this.state.flag) {
63+
renderHeaderForeground(){
64+
return (
65+
<View style={ [ ComponentStyles.pos_absolute, styles.header_content ] }>
66+
<Image
67+
style={ [ComponentStyles.avatar, CommonStyles.m_b_3] }
68+
source={{uri:"http://123.56.135.166/cnblog/public/img/common/author.jpg"}}/>
69+
<View style={ [CommonStyles.flexRow, CommonStyles.flexItemsBetween, CommonStyles.flexItemsMiddle] }>
70+
<Text style={ [CommonStyles.text_white, CommonStyles.font_md ] }>
71+
愤怒的晃晃
72+
</Text>
73+
<TouchableOpacity
74+
activeOpacity={ 0.2 }
75+
onPress={ ()=> onPress() }>
76+
<Icon
77+
name={ "ios-log-in-outline" }
78+
size= { 22 }
79+
color={ "#fff" } />
80+
</TouchableOpacity>
81+
</View>
82+
</View>
83+
)
84+
}
7985

80-
let onDrawerHide = this.props.onDrawerHide || (()=>null);
81-
let activeForeColor = StyleConfig.foregroundColor;
86+
renderHeader(){
87+
let { router } = this.props;
88+
return (
89+
<View style={ styles.header_container }>
90+
{ this.renderHeaderBackground() }
91+
{ this.renderHeaderForeground() }
92+
</View>
93+
)
94+
}
8295

83-
return (
84-
<TouchableHighlight
85-
underlayColor ={ StyleConfig.touchablePressColor }
86-
key={ index }
87-
onPress={ ()=> onDrawerHide(item) }>
88-
<View style={ [ CommonStyles.listItem ] }>
89-
<View style={ CommonStyles.listItemIcon }>
90-
<Icon
91-
name={ item.icon } size={ 22 } style={[{color: StyleConfig.secondaryColor }]}/>
92-
</View>
93-
<Text style={ [CommonStyles.listItemText, {color: StyleConfig.secondaryColor }] }>
94-
{ item.text }
95-
</Text>
96-
<Text style={ CommonStyles.listItemTail }>
97-
<Icon
98-
name={ "ios-arrow-round-forward" }
99-
size={22}
100-
style={[{color: StyleConfig.secondaryColor }]} />
101-
</Text>
102-
</View>
103-
</TouchableHighlight>
104-
)
105-
}
96+
renderActiveItem(item, index){
97+
let onDrawerHide = this.props.onDrawerHide || (()=>null);
98+
return (
99+
<TouchableHighlight
100+
underlayColor ={ StyleConfig.touchable_press_color }
101+
key={ index }
102+
style={[ CommonStyles.p_a_3, styles.item_active ]}
103+
onPress={ ()=> onDrawerHide(item) }>
104+
<View style={ [ CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsBetween ] }>
105+
<View style={ [CommonStyles.flexRow, CommonStyles.flexItemsMiddle] }>
106+
<View style={ [ CommonStyles.flexRow, CommonStyles.flexItemsCenter, CommonStyles.m_r_3, styles.list_icon] }>
107+
<Icon
108+
name={ item.icon } size={ StyleConfig.icon_size }
109+
style={ [ CommonStyles.text_danger ] } />
110+
</View>
111+
<Text style={ [ CommonStyles.font_sm, CommonStyles.text_danger ] }>
112+
{ item.text }
113+
</Text>
114+
</View>
115+
<View>
116+
<Icon name={ "ios-return-right-outline" }
117+
size={ StyleConfig.icon_size }
118+
style={[ CommonStyles.text_danger ]} />
119+
</View>
120+
</View>
121+
</TouchableHighlight>
122+
)
123+
}
106124

125+
renderNormalItem(item, index){
107126
return (
108127
<TouchableHighlight
109-
underlayColor ={ StyleConfig.touchablePressColor }
128+
underlayColor ={ StyleConfig.touchable_press_color }
110129
key={ index }
130+
style={[ CommonStyles.p_a_3 ]}
111131
onPress={ ()=> this.onItemPress(item) }>
112-
<View style={ CommonStyles.listItem }>
113-
<View style={ CommonStyles.listItemIcon }>
114-
<Icon name={ item.icon } size={ 22 } />
132+
<View style={ [ CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsBetween ] }>
133+
<View style={ [CommonStyles.flexRow, CommonStyles.flexItemsMiddle] }>
134+
<View style={ [ CommonStyles.flexRow, CommonStyles.flexItemsCenter, CommonStyles.m_r_3, styles.list_icon] }>
135+
<Icon name={ item.icon } size={ StyleConfig.icon_size } style={[ CommonStyles.text_dark ]}/>
136+
</View>
137+
138+
<Text style={ [ CommonStyles.font_sm, CommonStyles.text_dark ] }>
139+
{ item.text }
140+
</Text>
115141
</View>
116-
<Text style={ CommonStyles.listItemText }>
117-
{ item.text }
118-
</Text>
119142
</View>
120143
</TouchableHighlight>
121144
)
122145
}
123146

147+
renderItem(item, index){
148+
let onItemPress;
149+
if (item.flag === this.state.flag) {
150+
return this.renderActiveItem(item, index);
151+
}
152+
153+
return this.renderNormalItem(item, index);
154+
}
155+
124156
renderContent(){
125-
return (
126-
drawerItems && drawerItems.length ?
127-
<View style={ ComponentStyles.list }>
128-
{
129-
drawerItems.map((nav, index)=>{
130-
return this.renderItem(nav, index);
131-
})
132-
}
133-
</View>
134-
: null
135-
)
157+
if(drawerItems && drawerItems.length){
158+
return (
159+
<View style={ [ CommonStyles.p_y_1 ] }>
160+
{
161+
drawerItems.map((nav, index)=>{
162+
return this.renderItem(nav, index);
163+
})
164+
}
165+
</View>
166+
)
167+
}
136168
}
137169

138170
render() {
@@ -145,6 +177,20 @@ class DrawerPanel extends Component {
145177
}
146178
}
147179

180+
const styles = StyleSheet.create({
181+
header_container: {
182+
height: StyleConfig.header_height
183+
},
184+
header_content: {
185+
left: StyleConfig.space_3,
186+
right: StyleConfig.space_3,
187+
bottom: StyleConfig.space_3,
188+
},
189+
list_icon:{
190+
width: StyleConfig.icon_size
191+
}
192+
});
193+
148194
export default DrawerPanel;
149195

150196

‎source/component/homeRender.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,7 @@ class HomeRender extends Component {
7171

7272
renderParallaxBackground(){
7373
return (
74-
<View
75-
key="parallax-background">
74+
<View key="parallax-background">
7675
<Animatable.Image
7776
resizeMode="cover"
7877
style={ [ComponentStyles.header_img ] }
@@ -90,11 +89,11 @@ class HomeRender extends Component {
9089
key="parallax-foreground"
9190
style = { [ CommonStyles.flexColumn, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsCenter, styles.foreground ] }
9291
ref={(view)=>{ this.parallaxForeground = view}}>
93-
<Logo/>
94-
<Text style={[CommonStyles.text_white, CommonStyles.fontSize_lg, CommonStyles.m_y_2 ]}>
92+
<Logo style={ [CommonStyles.m_b_2, styles.logo] }/>
93+
<Text style={[CommonStyles.text_white, CommonStyles.font_eg, CommonStyles.m_b_1 ]}>
9594
{Config.appInfo.name}
9695
</Text>
97-
<Text style={[CommonStyles.text_light, CommonStyles.fontSize_sm]}>
96+
<Text style={[CommonStyles.text_light, CommonStyles.font_sm]}>
9897
{Config.appInfo.descr}
9998
</Text>
10099
</Animatable.View>
@@ -135,7 +134,10 @@ export const styles = StyleSheet.create({
135134
foreground:{
136135
height: StyleConfig.header_height,
137136
paddingTop: StyleConfig.space_4
138-
}
137+
},
138+
logo:{
139+
opacity: 0.8
140+
}
139141
});
140142

141143
export default HomeRender;

‎source/component/logo.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ class Logo extends Component {
1616
return (
1717
<Image
1818
style={ [ComponentStyles.avatar, this.props.style] }
19-
source={ require('../image/ic_launcher.png') } />
19+
source={ require('../image/ic_launcher_red.png') } />
2020
)
2121
}
2222
}

0 commit comments

Comments
 (0)