-
Notifications
You must be signed in to change notification settings - Fork 1
/
DefaultTabBar.js
110 lines (101 loc) · 3.04 KB
/
DefaultTabBar.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
const React = require('react');
const { ViewPropTypes } = ReactNative = require('react-native');
const {
StyleSheet,
Text,
View,
Animated,
} = ReactNative;
const Button = require('./Button');
const DefaultTabBar = React.createClass({
propTypes: {
goToPage: React.PropTypes.func,
activeTab: React.PropTypes.number,
tabs: React.PropTypes.array,
backgroundColor: React.PropTypes.string,
activeTextColor: React.PropTypes.string,
inactiveTextColor: React.PropTypes.string,
textStyle: Text.propTypes.style,
tabStyle: ViewPropTypes.style,
activeTabStyle: ViewPropTypes.style,
renderTab: React.PropTypes.func,
underlineStyle: ViewPropTypes.style,
shadowEffect: ViewPropTypes.style,
},
getDefaultProps() {
return {
activeTextColor: 'navy',
inactiveTextColor: 'black',
backgroundColor: null,
shadowEffect: {}
};
},
renderTabOption(name, page) {
},
renderTab(name, page, isTabActive, onPressHandler) {
const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
const textColor = isTabActive ? activeTextColor : inactiveTextColor;
const fontWeight = isTabActive ? 'bold' : 'normal';
const absoluteTabStyle = (isTabActive && this.props.activeTabStyle) ? this.props.activeTabStyle : this.props.tabStyle;
return <Button
style={styles.flexOne}
key={name}
accessible={true}
accessibilityLabel={name}
accessibilityTraits='button'
onPress={() => onPressHandler(page)}
>
<View style={[styles.tab, absoluteTabStyle ]}>
<Text style={[{color: textColor, fontWeight, }, textStyle, ]}>
{name}
</Text>
</View>
</Button>;
},
render() {
const containerWidth = this.props.containerWidth;
const numberOfTabs = this.props.tabs.length;
const tabUnderlineStyle = {
position: 'absolute',
width: containerWidth / numberOfTabs,
height: 4,
backgroundColor: 'navy',
bottom: 0,
};
const left = this.props.scrollValue.interpolate({
inputRange: [0, 1, ], outputRange: [0, containerWidth / numberOfTabs, ],
});
return (
<View style={[styles.tabs, {backgroundColor: this.props.backgroundColor, ...this.props.shadowEffect }, this.props.style, ]}>
{this.props.tabs.map((name, page) => {
const isTabActive = this.props.activeTab === page;
const renderTab = this.props.renderTab || this.renderTab;
return renderTab(name, page, isTabActive, this.props.goToPage);
})}
<Animated.View style={[tabUnderlineStyle, { left, }, this.props.underlineStyle, ]} />
</View>
);
},
});
const styles = StyleSheet.create({
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 10,
},
flexOne: {
flex: 1,
},
tabs: {
height: 50,
flexDirection: 'row',
justifyContent: 'space-around',
borderWidth: 1,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderColor: '#ccc',
},
});
module.exports = DefaultTabBar;