-
Notifications
You must be signed in to change notification settings - Fork 5
/
home-view.js
110 lines (99 loc) · 2.07 KB
/
home-view.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* @flow */
'use strict';
import React from 'react';
import {
Navigator,
StyleSheet,
Text,
TouchableHighlight,
View,
} from 'react-native';
import BlogView from './blog-view';
const Blogs = {
FLUFF: [
'marniethedog',
'derpycats',
'maddieonthings',
'mensweardog',
'thefluffingtonpost',
],
COOL: [
'bookshelfporn',
'fullcravings',
'geometrydaily',
'humansofnewyork',
'theblackworkshop',
'theoceanrolls',
'thingsorganizedneatly',
],
};
type EmojiButtonProps = {
onPress: Function;
text: string;
};
function EmojiButton(props: EmojiButtonProps): React.Element<any> {
return (
<TouchableHighlight
onPress={props.onPress}
style={styles.button}
underlayColor='#d1f2a5'
>
<Text style={styles.text}>
{props.text}
</Text>
</TouchableHighlight>
);
}
type HomeViewProps = {
navigator: Navigator;
};
export default class HomeView extends React.Component {
props: HomeViewProps;
constructor(props: HomeViewProps) {
super(props);
(this: any).navigateToOne = this.navigateToOne.bind(this);
}
render(): React.Element<any> {
return (
<View style={styles.container}>
<EmojiButton
onPress={() => { this.navigateToOne(Blogs.FLUFF); }}
text='🐈'
/>
<EmojiButton
onPress={() => { this.navigateToOne(Blogs.COOL); }}
text='💡'
/>
</View>
);
}
navigateToOne(blogs: Array<string>): void {
const blogname = random(blogs);
this.props.navigator.push({
title: blogname,
component: BlogView,
passProps: {blogname},
});
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
backgroundColor: '#f56991',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
},
button: {
backgroundColor: '#effab4',
borderColor: '#ff9f80',
borderRadius: 4,
padding: 30,
},
text: {
fontSize: 60,
}
});
function random<T>(items: Array<T>): T {
return items[Math.floor(Math.random() * items.length)];
}