TabBar.js
2.88 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
import {View, Text, Image, StyleSheet, TouchableOpacity, TouchableWithoutFeedback} from 'react-native'
import React from 'react'
import WithNotes from "../pages/WithNotes";
import {StackNavigator, TabNavigator, TabBarBottom, SafeAreaView} from 'react-navigation'
import Reimbursement from "../pages/Reimbursement";
import Chart from "../pages/Chart";
export const TabBar = TabNavigator({
Task: {
screen: WithNotes,
navigationOptions: {
tabBarLabel: '随手记',
tabBarIcon: ({focused, tintColor}) => (
<Image
source={!focused ? require('../assets/tab1.png') : require('../assets/tab1Active.png')}
style={[styles.tabIcon]}
resizeMode="contain"/>
),
}
},
Schedule: {
screen: Reimbursement,
navigationOptions: {
tabBarLabel: '报销',
tabBarIcon: ({focused, tintColor}) => (
<Image
source={!focused ? require('../assets/tab2.png') : require('../assets/tab2Active.png')}
style={[styles.tabIcon]}
resizeMode="contain"/>
),
}
},
Statics: {
screen: Chart,
navigationOptions: {
tabBarLabel: '报表',
tabBarIcon: ({focused, tintColor}) => (
<Image
source={!focused ? require('../assets/Chart.png') : require('../assets/ChartActive.png')}
style={[styles.tabIcon]}
resizeMode="contain"/>
),
}
},
},
{
tabBarComponent: TabBarBottom,
lazy: true,
animationEnabled: false, // 切换页面时不显示动画
tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
swipeEnabled: false, // 禁止左右滑动
backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转
tabBarOptions: {
activeTintColor: "#3399ff", // 文字和图片选中颜色icon_dd11@2x.png
inactiveTintColor: '#919caa', // 文字和图片默认颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
style: {
backgroundColor: '#f8f8fa', // TabBar 背景色
height: 49,
shadowColor: '#b2b2b2',
shadowOffset: {
width: 0,
height: 0.5
},
shadowRadius: 0,
shadowOpacity: 1,
borderTopWidth: 0,
borderTopColor: "#3399ff"
},
labelStyle: {
fontSize: 10, // 文字大小
// marginBottom: 2,
// marginTop:PublicStyle.setHeight(10)
},
iconStyle: {
height: 24,
// width: 22,
// marginBottom: 4
},
},
});
const styles = StyleSheet.create({
tabIcon: {
height: 24,
width: 24,
marginBottom: 2,
}
});