Skip to content

Commit 6d765b7

Browse files
breitningbreitning
committed
列表页面渲染
1 parent e5765ea commit 6d765b7

38 files changed

+866
-271
lines changed

‎source/component/offlinePostBar.js renamed to ‎source/component/bar/offlinePost.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import {
1010
import moment from 'moment';
1111
import Icon from 'react-native-vector-icons/Ionicons';
1212
import PureRenderMixin from 'react-addons-pure-render-mixin';
13-
import { ComponentStyles, StyleConfig } from '../style';
14-
import { postCategory, storageKey } from '../config';
13+
import { ComponentStyles, StyleConfig } from '../../style';
14+
import { postCategory, storageKey } from '../../config';
1515

1616
class OfflinePostBar extends Component {
1717

‎source/component/postBar.js renamed to ‎source/component/bar/post.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import {
99
import moment from 'moment';
1010
import Icon from 'react-native-vector-icons/Ionicons';
1111
import PureRenderMixin from 'react-addons-pure-render-mixin';
12-
import { getBloggerName } from '../common';
13-
import { postCategory, storageKey } from '../config';
14-
import { ComponentStyles, StyleConfig } from '../style';
12+
import { getBloggerName } from '../../common';
13+
import { postCategory, storageKey } from '../../config';
14+
import { ComponentStyles, StyleConfig } from '../../style';
1515

1616
class PostBar extends Component {
1717

‎source/component/codeAvatar.js

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎source/component/codeLogo.js

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎source/component/authorRender.js renamed to ‎source/component/header/author.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@ import moment from 'moment';
1313
import ParallaxScrollView from 'react-native-parallax-scroll-view';
1414
import * as Animatable from 'react-native-animatable';
1515
import PureRenderMixin from 'react-addons-pure-render-mixin';
16-
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
17-
import { getImageSource, getBloggerAvatar, decodeHTML } from '../common';
18-
import Navbar from './navbar';
16+
import { CommonStyles, ComponentStyles, StyleConfig } from '../../style';
17+
import { getImageSource, getBloggerAvatar, decodeHTML } from '../../common';
18+
import Navbar from '../navbar';
1919

20-
const { height, width } = Dimensions.get('window');
2120

2221
class AuthorRender extends Component {
2322

‎source/component/header/blink.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import React, { Component } from 'react';
2+
import {
3+
View,
4+
Image,
5+
Text,
6+
Dimensions,
7+
ScrollView,
8+
TouchableOpacity
9+
} from 'react-native';
10+
11+
import _ from 'lodash';
12+
import * as Animatable from 'react-native-animatable';
13+
import PureRenderMixin from 'react-addons-pure-render-mixin';
14+
import ParallaxScrollView from 'react-native-parallax-scroll-view';
15+
import { getImageSource } from '../../common';
16+
import Navbar from '../navbar';
17+
18+
import { CommonStyles, ComponentStyles, StyleConfig } from '../../style';
19+
20+
class BlinkRender extends Component {
21+
22+
constructor(props) {
23+
super(props);
24+
25+
this.state = {
26+
cover: null
27+
};
28+
29+
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
30+
}
31+
32+
componentDidMount(){
33+
let cover = getImageSource();
34+
this.setState({
35+
cover: cover
36+
});
37+
}
38+
39+
componentWillUnmount(){
40+
this.setState({
41+
cover: null
42+
});
43+
}
44+
45+
renderParallaxScrollComponent(){
46+
return (
47+
<ScrollView
48+
showsVerticalScrollIndicator = {false}
49+
showsHorizontalScrollIndicator = {false}>
50+
</ScrollView>
51+
)
52+
}
53+
54+
renderParallaxBackground(postInfo){
55+
return (
56+
<View style={ CommonStyles.headerBackground } key="parallax-background">
57+
<Animatable.Image
58+
resizeMode="cover"
59+
style={ CommonStyles.headerBackgroundImage }
60+
source={{uri: this.state.cover }}
61+
ref={(view)=>{this.parallaxBackground = view}} >
62+
</Animatable.Image>
63+
<View style={ CommonStyles.headerBackgroundMask }/>
64+
</View>
65+
)
66+
}
67+
68+
renderParallaxForeground(postInfo){
69+
70+
let postTitle = _.truncate(postInfo.title, { length : 50 });
71+
72+
return (
73+
<Animatable.View
74+
key="parallax-foreground"
75+
ref={(view)=>{ this.parallaxForeground = view}}
76+
style={ ComponentStyles.headerContainer } >
77+
<Text style={ ComponentStyles.headerTitleText }>
78+
{ postTitle }
79+
</Text>
80+
81+
<View style={ ComponentStyles.headerMetaContainer }>
82+
<View style={ ComponentStyles.headerMetaInfo }>
83+
<Image style={ ComponentStyles.metaAuthorAvatar }
84+
source={{ uri: postInfo.authorAvatar }}/>
85+
<Text style={ ComponentStyles.metaAuthorName }>
86+
{ postInfo.authorName }
87+
</Text>
88+
</View>
89+
<Text style={ ComponentStyles.metaRight }>
90+
{ postInfo.published }
91+
</Text>
92+
</View>
93+
</Animatable.View>
94+
)
95+
}
96+
97+
renderParallaxStickyHeader(postInfo){
98+
return (
99+
<Navbar
100+
backgroundImage = { {uri: this.state.cover} }
101+
leftIconName = { postInfo.authorAvatar }
102+
title={ postInfo.authorName }/>
103+
);
104+
}
105+
106+
render() {
107+
108+
let { post } = this.props;
109+
110+
return (
111+
<ParallaxScrollView
112+
headerBackgroundColor="#111"
113+
ref={(view)=>{this.parallaxView = view}}
114+
stickyHeaderHeight={ StyleConfig.navbarHeight }
115+
parallaxHeaderHeight={ StyleConfig.parallaxHeaderHeight }
116+
renderScrollComponent={()=> this.renderParallaxScrollComponent()}
117+
renderBackground={() => this.renderParallaxBackground(post)}
118+
renderForeground={() => this.renderParallaxForeground(post)}
119+
renderStickyHeader={() => this.renderParallaxStickyHeader(post)}>
120+
121+
{ this.props.children }
122+
123+
</ParallaxScrollView>
124+
);
125+
}
126+
}
127+
128+
export default BlinkRender;

‎source/component/homeRender.js renamed to ‎source/component/header/home.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ import _ from 'lodash';
1313
import * as Animatable from 'react-native-animatable';
1414
import PureRenderMixin from 'react-addons-pure-render-mixin';
1515
import ParallaxScrollView from 'react-native-parallax-scroll-view';
16-
import Navbar from './navbar';
17-
import Config from '../config';
18-
import Logo from '../component/logo';
19-
import { getImageSource } from '../common';
20-
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
16+
import Navbar from '../navbar';
17+
import Config from '../../config';
18+
import Logo from '../../component/logo';
19+
import { getImageSource } from '../../common';
20+
import { CommonStyles, ComponentStyles, StyleConfig } from '../../style';
2121

2222
const backgroundImageSource = getImageSource(1);
2323

@@ -124,7 +124,9 @@ class HomeRender extends Component {
124124
renderBackground={() => this.renderParallaxBackground()}
125125
renderForeground={() => this.renderParallaxForeground()}
126126
renderStickyHeader={() => this.renderParallaxStickyHeader()}>
127+
127128
{ this.props.children }
129+
128130
</ParallaxScrollView>
129131
);
130132
}

‎source/component/offlinePostRender.js renamed to ‎source/component/header/offlinePost.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import moment from 'moment';
1313
import * as Animatable from 'react-native-animatable';
1414
import PureRenderMixin from 'react-addons-pure-render-mixin';
1515
import ParallaxScrollView from 'react-native-parallax-scroll-view';
16-
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
17-
import { getImageSource } from '../common';
18-
import Navbar from './navbar';
16+
import { CommonStyles, ComponentStyles, StyleConfig } from '../../style';
17+
import { getImageSource } from '../../common';
18+
import Navbar from '../navbar';
1919

2020
class OfflinePostRender extends Component {
2121

‎source/component/postRender.js renamed to ‎source/component/header/post.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import _ from 'lodash';
1212
import * as Animatable from 'react-native-animatable';
1313
import PureRenderMixin from 'react-addons-pure-render-mixin';
1414
import ParallaxScrollView from 'react-native-parallax-scroll-view';
15-
import { getImageSource } from '../common';
16-
import Navbar from './navbar';
15+
import { getImageSource } from '../../common';
16+
import Navbar from '../navbar';
1717

18-
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
18+
import { CommonStyles, ComponentStyles, StyleConfig } from '../../style';
1919

2020
class PostRender extends Component {
2121

0 commit comments

Comments
 (0)