TabBarTop.js
2.78 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
import * as React from 'react';
import { Animated, StyleSheet } from 'react-native';
import { TabBar } from 'react-native-tab-view';
import TabBarIcon from './TabBarIcon';
export default class TabBarTop extends React.PureComponent {
static defaultProps = {
activeTintColor: '#fff',
inactiveTintColor: '#fff',
showIcon: false,
showLabel: true,
upperCaseLabel: true,
allowFontScaling: true
};
_renderLabel = scene => {
const {
position,
navigation,
activeTintColor,
inactiveTintColor,
showLabel,
upperCaseLabel,
labelStyle,
allowFontScaling
} = this.props;
if (showLabel === false) {
return null;
}
const { index } = scene;
const { routes } = navigation.state;
// Prepend '-1', so there are always at least 2 items in inputRange
const inputRange = [-1, ...routes.map((x, i) => i)];
const outputRange = inputRange.map(inputIndex => inputIndex === index ? activeTintColor : inactiveTintColor);
const color = position.interpolate({
inputRange,
outputRange: outputRange
});
const tintColor = scene.focused ? activeTintColor : inactiveTintColor;
const label = this.props.getLabel({ ...scene, tintColor });
if (typeof label === 'string') {
return <Animated.Text style={[styles.label, { color }, labelStyle]} allowFontScaling={allowFontScaling}>
{upperCaseLabel ? label.toUpperCase() : label}
</Animated.Text>;
}
if (typeof label === 'function') {
return label({ ...scene, tintColor });
}
return label;
};
_renderIcon = scene => {
const {
position,
navigation,
activeTintColor,
inactiveTintColor,
renderIcon,
showIcon,
iconStyle
} = this.props;
if (showIcon === false) {
return null;
}
return <TabBarIcon position={position} navigation={navigation} activeTintColor={activeTintColor} inactiveTintColor={inactiveTintColor} renderIcon={renderIcon} scene={scene} style={[styles.icon, iconStyle]} />;
};
_handleOnPress = scene => {
const { getOnPress, jumpToIndex, navigation } = this.props;
const previousScene = navigation.state.routes[navigation.state.index];
const onPress = getOnPress(previousScene, scene);
if (onPress) {
onPress({ previousScene, scene, jumpToIndex });
} else {
jumpToIndex(scene.index);
}
};
render() {
// TODO: Define full proptypes
const props = this.props;
return <TabBar {...props} onTabPress={this._handleOnPress} jumpToIndex={() => {}} renderIcon={this._renderIcon} renderLabel={this._renderLabel} />;
}
}
const styles = StyleSheet.create({
icon: {
height: 24,
width: 24
},
label: {
textAlign: 'center',
fontSize: 13,
margin: 8,
backgroundColor: 'transparent'
}
});