无法从Tab.Navigator删除Tab.Screen

时间：2020-06-24 02:33:59

标签： react-native colors tabs navigation navigator

我正在尝试对该登录页面https://github.com/itzpradip/react-navigation-v5-mix进行编码。

我做到了，它工作得很好，问题在于它在屏幕底部有4个选项卡，如果我删除其中的一个，则所有选项卡都会显示为紫色。我不知道该怎么解决。我将用this GIF进行演示。

这是代码（当我尝试删除MainTabScreen.js的<Tab.Screen name="Profile" component={() => {}} />行时会发生问题）：

App.js 

import 'react-native-gesture-handler';
import React, { useEffect } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import AsyncStorage from '@react-native-community/async-storage';

import {
  NavigationContainer,
  DefaultTheme as NavigationDefaultTheme,
  DarkTheme as NavigationDarkTheme,
} from '@react-navigation/native';

import {
  Provider as PaperProvider,
  DefaultTheme as PaperDefaultTheme,
  DarkTheme as PaperDarkTheme,
} from 'react-native-paper';

import { DrawerContent } from './screens/DrawerContent';

import MainTabScreen from './screens/MainTabScreen';

import { AuthContext } from './components/context';

import RootStackScreen from './screens/RootStackScreen';

const Drawer = createDrawerNavigator();

const App = () => {
  // const [isLoading, setIsLoading] = React.useState(true);
  // const [userToken, setUserToken] = React.useState(null);

  const [isDarkTheme, setIsDarkTheme] = React.useState(false);

  const initialLoginState = {
    isLoading: true,
    userName: null,
    userToken: null,
  };

  const CustomDefaultTheme = {
    ...NavigationDefaultTheme,
    ...PaperDefaultTheme,
    colors: {
      ...NavigationDefaultTheme.colors,
      ...PaperDefaultTheme.colors,
      background: '#ffffff',
      text: '#333333',
    },
  };

  const CustomDarkTheme = {
    ...NavigationDarkTheme,
    ...PaperDarkTheme,
    colors: {
      ...NavigationDarkTheme.colors,
      ...PaperDarkTheme.colors,
      background: '#333333',
      text: '#ffffff',
    },
  };

  const theme = isDarkTheme ? CustomDarkTheme : CustomDefaultTheme;

  const loginReducer = (prevState, action) => {
    // eslint-disable-next-line default-case
    switch (action.type) {
      case 'RETRIEVE_TOKEN':
        return {
          ...prevState,
          userToken: action.token,
          isLoading: false,
        };
      case 'LOGIN':
        return {
          ...prevState,
          userName: action.id,
          userToken: action.token,
          isLoading: false,
        };
      case 'LOGOUT':
        return {
          ...prevState,
          userName: null,
          userToken: null,
          isLoading: false,
        };
      case 'REGISTER':
        return {
          ...prevState,
          userName: action.id,
          userToken: action.token,
          isLoading: false,
        };
    }
  };

  const [loginState, dispatch] = React.useReducer(
    loginReducer,
    initialLoginState
  );

  const authContext = React.useMemo(
    () => ({
      signIn: async (foundUser) => {
        // setUserToken('fgkj');
        // setIsLoading(false);
        const userToken = String(foundUser[0].userToken);
        const userName = foundUser[0].username;

        try {
          await AsyncStorage.setItem('userToken', userToken);
        } catch (e) {
          console.log(e);
        }
        // console.log('user token: ', userToken);
        dispatch({ type: 'LOGIN', id: userName, token: userToken });
      },
      signOut: async () => {
        // setUserToken(null);
        // setIsLoading(false);
        try {
          await AsyncStorage.removeItem('userToken');
        } catch (e) {
          console.log(e);
        }
        dispatch({ type: 'LOGOUT' });
      },
      signUp: () => {
        // setUserToken('fgkj');
        // setIsLoading(false);
      },
      toggleTheme: () => {
        // eslint-disable-next-line no-shadow
        setIsDarkTheme((isDarkTheme) => !isDarkTheme);
      },
    }),
    []
  );

  useEffect(() => {
    setTimeout(async () => {
      // setIsLoading(false);
      let userToken;
      userToken = null;
      try {
        userToken = await AsyncStorage.getItem('userToken');
      } catch (e) {
        console.log(e);
      }
      // console.log('user token: ', userToken);
      dispatch({ type: 'RETRIEVE_TOKEN', token: userToken });
    }, 1000);
  }, []);

  if (loginState.isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }
  return (
    <PaperProvider theme={theme}>
      <AuthContext.Provider value={authContext}>
        <NavigationContainer theme={theme}>
          {loginState.userToken !== null ? (
            <Drawer.Navigator
              drawerContent={(props) => <DrawerContent {...props} />}
            >
              <Drawer.Screen name="HomeDrawer" component={MainTabScreen} />
            </Drawer.Navigator>
          ) : (
            <RootStackScreen />
          )}
        </NavigationContainer>
      </AuthContext.Provider>
    </PaperProvider>
  );
};

export default App;

MainTabScreen.js 

import React from 'react';
import { Dimensions } from 'react-native';

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

import Icon from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';

import TrackerScreen from '../../MapTracking/index';
import DataScreen from './DataScreen';
import MapScreen from './MapScreen';

const TrackerStack = createStackNavigator();
const DataStack = createStackNavigator();
const MapStack = createStackNavigator();

const Tab = createMaterialBottomTabNavigator();

const { width } = Dimensions.get('window');

const TrackerStackScreen = ({ navigation }) => (
  <TrackerStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#009387',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
        paddingLeft: width / 2 - 140,
      },
    }}
  >
    <TrackerStack.Screen
      name="Tracker"
      component={TrackerScreen}
      options={{
        title: 'Monitoramento',
        headerLeft: () => (
          <Ionicons.Button
            name="ios-menu"
            iconStyle={{ paddingLeft: 10 }}
            size={25}
            backgroundColor="#009387"
            onPress={() => navigation.openDrawer()}
          />
        ),
      }}
    />
  </TrackerStack.Navigator>
);

const DataStackScreen = ({ navigation }) => (
  <DataStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#1f65ff',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
        paddingLeft: width / 2 - 100,
      },
    }}
  >
    <DataStack.Screen
      name="Dados"
      component={DataScreen}
      options={{
        headerLeft: () => (
          <Ionicons.Button
            name="ios-menu"
            iconStyle={{ paddingLeft: 10 }}
            size={25}
            backgroundColor="#1f65ff"
            onPress={() => navigation.openDrawer()}
          />
        ),
      }}
    />
  </DataStack.Navigator>
);

const MapStackScreen = ({ navigation }) => (
  <MapStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: 'rgba(231,76,60,1)',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
        paddingLeft: width / 2 - 130,
      },
    }}
  >
    <MapStack.Screen
      name="Mapeamento"
      component={MapScreen}
      options={{
        headerLeft: () => (
          <Ionicons.Button
            name="ios-menu"
            size={25}
            iconStyle={{ paddingLeft: 10 }}
            backgroundColor="rgba(231,76,60,1)"
            onPress={() => navigation.openDrawer()}
          />
        ),
      }}
    />
  </MapStack.Navigator>
);

const MainTabScreen = () => (
  <Tab.Navigator initialRouteName="Tracker" activeColor="#fff">
    <Tab.Screen
      name="Tracker"
      component={TrackerStackScreen}
      options={{
        tabBarLabel: 'Monitoramento',
        tabBarColor: '#009387',
        tabBarIcon: ({ color }) => (
          <Icon name="location-arrow" color={color} size={26} />
        ),
      }}
    />
    <Tab.Screen
      name="Dados"
      component={DataStackScreen}
      options={{
        tabBarLabel: 'Dados',
        tabBarColor: '#1f65ff',
        tabBarIcon: ({ color }) => (
          <Icon name="info-circle" color={color} size={26} />
        ),
      }}
    />
    <Tab.Screen name="Profile" component={() => {}} />
    <Tab.Screen
      name="Map"
      component={MapStackScreen}
      options={{
        tabBarLabel: 'Mapeamento',
        tabBarColor: 'rgba(231,76,60,1)',
        tabBarIcon: ({ color }) => <Icon name="map" color={color} size={26} />,
      }}
    />
  </Tab.Navigator>
);

export default MainTabScreen;

依赖项 

"dependencies": {
"@mauron85/react-native-background-geolocation": "^0.6.3",
"@react-native-community/async-storage": "^1.9.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/drawer": "^5.8.2",
"@react-navigation/material-bottom-tabs": "^5.1.6",
"@react-navigation/native": "^5.5.1",
"@react-navigation/stack": "^5.0.6",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-action-button": "^2.8.5",
"react-native-animatable": "^1.3.3",
"react-native-background-timer": "^2.2.0",
"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera.git",
"react-native-geolocation-service": "^5.0.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-maps": "^0.27.1",
"react-native-paper": "^3.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.5",
"react-native-screens": "^2.9.0",
"react-native-vector-icons": "^6.6.0",
"rn-fetch-blob": "^0.12.0"
 },

有人可以帮助我吗？

0 个答案:

没有答案
相关问题
最新问题