123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- import React, {Component} from 'react';
- import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
- import {NavigationContainer} from '@react-navigation/native';
- import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
- import home_navigation from './home_navigation';
- import personal_navigation from './personal_navigation';
- import {RetrieveData} from '../../data/storage';
- import message_list from '../../page/tax_message/message_list';
- import tax_navigation from './tax_navigation';
- function MyTabBar({state, descriptors, navigation}) {
- return (
- <View style={{flexDirection: 'row'}}>
- {state.routes.map((route, index) => {
- const {options} = descriptors[route.key];
- const label =
- options.tabBarLabel !== undefined
- ? options.tabBarLabel
- : options.title !== undefined
- ? options.title
- : route.name;
- const isFocused = state.index === index;
- const onPress = () => {
- const event = navigation.emit({
- type: 'tabPress',
- target: route.key,
- });
- if (!isFocused && !event.defaultPrevented) {
- navigation.navigate(route.name);
- }
- };
- const onLongPress = () => {
- navigation.emit({
- type: 'tabLongPress',
- target: route.key,
- });
- };
- return (
- <TouchableOpacity
- key={route.key}
- accessibilityRole="button"
- accessibilityStates={isFocused ? ['selected'] : []}
- accessibilityLabel={options.tabBarAccessibilityLabel}
- testID={options.tabBarTestID}
- onPress={onPress}
- onLongPress={onLongPress}
- style={{
- flex: 1,
- height: 50,
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- }}>
- <Text style={{color: isFocused ? '#673ab7' : '#222'}}>{label}</Text>
- </TouchableOpacity>
- );
- })}
- </View>
- );
- }
- const Tab = createBottomTabNavigator();
- export default class Main_tab_navigation extends Component {
- constructor(props) {
- super(props);
- this.state = {
- authority: '',
- };
- }
- render() {
- return (
- <NavigationContainer>
- <Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>
- <Tab.Screen
- name="home_navigation"
- component={home_navigation}
- options={{
- title: '首页',
- unmountOnBlur: true,
- // tabBarIcon: ({color, size}) => (
- // <MaterialCommunityIcons name="home" color={color} size={100} />
- // ),
- }}
- />
- <Tab.Screen
- name="tax_navigation"
- component={tax_navigation}
- options={{
- title: '消息',
- unmountOnBlur: true,
- // tabBarLabel: 'Home',
- // tabBarIcon: ({color, size}) => (
- // // <MaterialCommunityIcons name="home" color={color} size={size} />
- // <MaterialCommunityIcons name="account" color={color} size={26} />
- // ),
- }}
- // initialParams={this.state.authority}
- />
- <Tab.Screen
- name="personal_navigation"
- component={personal_navigation}
- options={{
- title: '个人中心',
- unmountOnBlur: true,
- // tabBarIcon: ({color, size}) => (
- // <MaterialCommunityIcons
- // name="home"
- // color={color}
- // size={26}
- // />
- // ),
- }}
- />
- </Tab.Navigator>
- </NavigationContainer>
- );
- }
- componentDidMount(): void {
- this.getAuthority();
- }
- getAuthority = async () => {
- let authority = await RetrieveData('authority');
- if (authority) {
- this.setState({
- authority: authority,
- });
- }
- };
- }
|