Skip to content

Commit 525fa3d

Browse files
NhacsamNhacsam
committed
Prepare for more example
1 parent 01b3f98 commit 525fa3d

File tree

5 files changed

+253
-134
lines changed

5 files changed

+253
-134
lines changed

‎example/Pages/Menu.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import { StyleSheet, Text, Image, TouchableOpacity, StatusBar, View, Dimensions } from 'react-native';
3+
import { withNavigation } from '@exponent/ex-navigation';
4+
import { Router } from '../main';
5+
6+
import tvShowContent from '../assets/tvShowContent';
7+
8+
const styles = StyleSheet.create({
9+
page: {
10+
flex: 1,
11+
alignItems: 'stretch',
12+
padding: 30,
13+
},
14+
button: {
15+
height: 100,
16+
width: Dimensions.get('window').width - 60,
17+
backgroundColor: '#cccccc',
18+
borderRadius: 10,
19+
},
20+
buttonText: {
21+
color: 'white',
22+
backgroundColor: 'transparent',
23+
fontSize: 20,
24+
fontWeight: 'bold',
25+
},
26+
overlay: {
27+
backgroundColor: 'rgba(0,0,0,0.3)',
28+
flex: 1,
29+
alignSelf: 'stretch',
30+
justifyContent: 'center',
31+
alignItems: 'center',
32+
}
33+
});
34+
35+
console.log(Router);
36+
37+
@withNavigation
38+
class Button extends React.Component {
39+
render() {
40+
const props = this.props;
41+
return (
42+
<TouchableOpacity activeOpacity={0.7} onPress={() => {
43+
this.props.navigator.push(Router.getRoute(props.target));
44+
}}>
45+
<Image style={styles.button} source={props.image}>
46+
<View style={styles.overlay}>
47+
<Text style={styles.buttonText}>{ props.text }</Text>
48+
</View>
49+
</Image>
50+
</TouchableOpacity>
51+
);
52+
}
53+
}
54+
55+
const Menu = () => (
56+
<View style={styles.page}>
57+
<StatusBar />
58+
<Button image={tvShowContent.image} text="TV Show" target="tvShow" />
59+
</View>
60+
);
61+
62+
Menu.route = {
63+
navigationBar: {
64+
title: 'ImageHeaderScrollView',
65+
},
66+
};
67+
68+
export default Menu;

‎example/Pages/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as Menu } from './Menu';
2+
export { default as TvShow } from './TvShow';

‎example/Pages/tvShow.js‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import Exponent from 'exponent';
2+
import React, { Component } from 'react';
3+
import {
4+
StyleSheet,
5+
Text,
6+
View,
7+
Image,
8+
Dimensions,
9+
StatusBar,
10+
} from 'react-native';
11+
import * as Animatable from 'react-native-animatable';
12+
import { NavigationBar } from '@exponent/ex-navigation';
13+
14+
15+
// import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
16+
import HeaderImageScrollView, { TriggeringView } from '../ImageHeaderScrollView';
17+
import tvShowContent from '../assets/tvShowContent';
18+
19+
const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
20+
const MAX_HEIGHT = 250;
21+
22+
const styles = StyleSheet.create({
23+
image: {
24+
height: MAX_HEIGHT,
25+
width: Dimensions.get('window').width,
26+
alignSelf: 'stretch',
27+
resizeMode: 'cover',
28+
},
29+
title: {
30+
fontSize: 20,
31+
},
32+
name: {
33+
fontWeight: 'bold',
34+
},
35+
section: {
36+
padding: 20,
37+
borderBottomWidth: 1,
38+
borderBottomColor: '#cccccc',
39+
backgroundColor: 'white',
40+
},
41+
sectionTitle: {
42+
fontSize: 18,
43+
fontWeight: 'bold',
44+
},
45+
sectionContent: {
46+
fontSize: 16,
47+
textAlign: 'justify',
48+
},
49+
keywords: {
50+
flexDirection: 'row',
51+
justifyContent: 'flex-start',
52+
alignItems: 'flex-start',
53+
flexWrap: 'wrap',
54+
},
55+
keywordContainer: {
56+
backgroundColor: '#999999',
57+
borderRadius: 10,
58+
margin: 10,
59+
padding: 10,
60+
},
61+
keyword: {
62+
fontSize: 16,
63+
color: 'white',
64+
},
65+
titleContainer: {
66+
flex: 1,
67+
alignSelf: 'stretch',
68+
justifyContent: 'center',
69+
alignItems: 'center',
70+
},
71+
imageTitle: {
72+
color: 'white',
73+
backgroundColor: 'transparent',
74+
fontSize: 24,
75+
},
76+
navTitleView: {
77+
height: MIN_HEIGHT,
78+
justifyContent: 'center',
79+
alignItems: 'center',
80+
paddingTop: 16,
81+
opacity: 0,
82+
},
83+
navTitle: {
84+
color: 'white',
85+
fontSize: 18,
86+
backgroundColor: 'transparent',
87+
},
88+
});
89+
90+
class TvShow extends Component {
91+
constructor() {
92+
super();
93+
this.state = { showNavTitle: false };
94+
}
95+
96+
render() {
97+
return (
98+
<View style={{ flex: 1, marginTop: -MIN_HEIGHT }}>
99+
<StatusBar barStyle="light-content" />
100+
<HeaderImageScrollView
101+
maxHeight={MAX_HEIGHT}
102+
minHeight={MIN_HEIGHT}
103+
maxOverlayOpacity={0.6}
104+
minOverlayOpacity={0.3}
105+
fadeOutForeground
106+
renderHeader={() => (
107+
<Image source={tvShowContent.image} style={styles.image} />
108+
)}
109+
renderFixedForeground={() => (
110+
<Animatable.View
111+
style={styles.navTitleView}
112+
ref={(navTitleView) => { this.navTitleView = navTitleView; }}
113+
>
114+
<Text style={styles.navTitle}>{tvShowContent.title}, ({tvShowContent.year})</Text>
115+
</Animatable.View>
116+
)}
117+
renderForeground={() => (
118+
<View style={styles.titleContainer}>
119+
<Text style={styles.imageTitle}>{tvShowContent.title}</Text>
120+
</View>
121+
)}
122+
>
123+
<TriggeringView
124+
style={styles.section}
125+
onHide={() => this.navTitleView.fadeInUp(200)}
126+
onDisplay={() => this.navTitleView.fadeOut(100)}
127+
>
128+
<Text style={styles.title}>
129+
<Text style={styles.name}>{tvShowContent.title}</Text>, ({tvShowContent.year})
130+
</Text>
131+
</TriggeringView>
132+
<View style={styles.section}>
133+
<Text style={styles.sectionTitle}>Overview</Text>
134+
<Text style={styles.sectionContent}>{tvShowContent.overview}</Text>
135+
</View>
136+
<View style={styles.section}>
137+
<Text style={styles.sectionTitle}>Keywords</Text>
138+
<View style={styles.keywords}>
139+
{tvShowContent.keywords.map(keyword => (
140+
<View style={styles.keywordContainer} key={keyword}>
141+
<Text style={styles.keyword}>{keyword}</Text>
142+
</View>
143+
))}
144+
</View>
145+
</View>
146+
</HeaderImageScrollView>
147+
</View>
148+
);
149+
}
150+
}
151+
152+
TvShow.route = {
153+
navigationBar: {
154+
tintColor: 'white',
155+
backgroundColor: 'transparent',
156+
borderBottomWidth: 0,
157+
statusBarHeight: 0,
158+
elevation: 0,
159+
},
160+
};
161+
162+
export default TvShow;

0 commit comments

Comments
 (0)