forked from osdio/noder-react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathTabBar.js
More file actions
107 lines (88 loc) · 2.15 KB
/
TabBar.js
File metadata and controls
107 lines (88 loc) · 2.15 KB
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
import React, {
StyleSheet,
Text,
TouchableOpacity,
View,
Dimensions,
Component,
PropTypes,
Animated
} from 'react-native';
const { width } = Dimensions.get('window');
const underLineColor = '#3498DB';
const activeTabTextColor = 'rgba(0,0,0,9)';
const normalTabTextColor = 'rgba(0,0,0,0.4)';
class TabBar extends Component {
static propTypes = {
goToPage: PropTypes.func,
activeTab: PropTypes.number,
tabs: PropTypes.array,
tabStyle: PropTypes.object,
tabTextStyle: PropTypes.object,
activeTabTextColor: PropTypes.string,
normalTabTextColor: PropTypes.string
};
static defaultProps = {
activeTabTextColor,
normalTabTextColor
};
constructor(props) {
super(props);
}
renderTabOption(name, page) {
const isTabActive = this.props.activeTab === page;
const textStyle = {
color: isTabActive ? this.props.activeTabTextColor : this.props.normalTabTextColor,
fontWeight: isTabActive ? 'bold' : 'normal'
};
return (
<TouchableOpacity key={name} onPress={() => this.props.goToPage(page)}>
<View style={[styles.tab, this.props.tabStyle]}>
<Text style={[ textStyle, this.props.tabTextStyle ]}>
{ name }
</Text>
</View>
</TouchableOpacity>
);
}
render() {
var numberOfTabs = this.props.tabs.length;
var tabUnderlineStyle = {
position: 'absolute',
width: width / numberOfTabs,
height: 4,
backgroundColor: underLineColor,
bottom: 0
};
var left = this.props.scrollValue.interpolate({
inputRange: [0, 1], outputRange: [0, width / numberOfTabs]
});
return (
<View style={[ styles.tabs, this.props.style]}>
{this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
<Animated.View style={[tabUnderlineStyle, this.props.tabUnderlineStyle, {left}]}/>
</View>
);
}
}
const styles = StyleSheet.create({
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 10,
paddingTop: 10
},
tabs: {
height: 50 + 4,
flexDirection: 'row',
marginTop: 0,
borderWidth: 1,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderBottomColor: 'rgba(0,0,0,0.06)',
justifyContent: 'space-around'
}
});
export default TabBar;