-
Notifications
You must be signed in to change notification settings - Fork 3
/
Dashboard.js
80 lines (74 loc) · 3.18 KB
/
Dashboard.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
import React, { Component } from 'react';
import { StyleSheet, Text, View, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import PostsListView from './PostsListView';
import HackerNewsApi from './HackerNewsApi';
import TabNavigator from 'react-native-tab-navigator';
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'topTab'
}
}
_renderContent(color, api) {
return (
<View style={{flex: 1, backgroundColor: color}}>
<PostsListView
navigator={this.props.navigator}
postIds={false}
postsApi={api}>
</PostsListView>
</View>
);
}
render() {
let iconSize = 28;
let iconColor = '#ff6600';
return (
<TabNavigator tabBarStyle={{backgroundColor: 'white'}}>
<TabNavigator.Item
selected={this.state.selectedTab === 'topTab'}
title="Top"
renderIcon={() => <Icon name="ios-heart-outline" color={iconColor} size={iconSize}/>}
renderSelectedIcon={() => <Icon name="ios-heart" color={iconColor} size={iconSize}/>}
onPress={() => this.setState({ selectedTab: 'topTab' })}>
{this._renderContent('white', HackerNewsApi.topStories)}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'newTab'}
title="New"
renderIcon={() => <Icon name="ios-bulb-outline" color={iconColor} size={iconSize}/>}
renderSelectedIcon={() => <Icon name="ios-bulb" color={iconColor} size={iconSize}/>}
onPress={() => this.setState({ selectedTab: 'newTab' })}>
{this._renderContent('white', HackerNewsApi.newStories)}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'showTab'}
title="Show"
renderIcon={() => <Icon name="ios-sunny-outline" color={iconColor} size={iconSize}/>}
renderSelectedIcon={() => <Icon name="ios-sunny" color={iconColor} size={iconSize}/>}
onPress={() => this.setState({ selectedTab: 'showTab' })}>
{this._renderContent('white', HackerNewsApi.showStories)}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'askTab'}
title="Ask"
renderIcon={() => <Icon name="ios-chatboxes-outline" color={iconColor} size={iconSize}/>}
renderSelectedIcon={() => <Icon name="ios-chatboxes" color={iconColor} size={iconSize}/>}
onPress={() => this.setState({ selectedTab: 'askTab' })}>
{this._renderContent('white', HackerNewsApi.askStories)}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'jobTab'}
title="Job"
renderIcon={() => <Icon name="ios-code-working-outline" color={iconColor} size={iconSize}/>}
renderSelectedIcon={() => <Icon name="ios-code-working" color={iconColor} size={iconSize}/>}
onPress={() => this.setState({ selectedTab: 'jobTab' })}>
{this._renderContent('white', HackerNewsApi.jobStories)}
</TabNavigator.Item>
</TabNavigator>
);
}
}
module.exports = Dashboard;