React Native:如何在登录前隐藏底部栏并在用户登录后显示它? [英] React Native: How to hide bottom bar before login and show it once the user is logged in?

问题描述

我想在用户登录应用后显示底部栏.目前它在应用启动时显示.

I want to show the bottom bar after the user is logged in in the app. Currently it is showing when app starts.

这是我的底栏代码:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import React from 'react';

const TabNavigator = createBottomTabNavigator(
  {
    HOME: { screen: HomeStack },
    SEARCH: { screen: SearchStack },
    ADDMORE: { screen: AddMoreStack },
    USER: { screen: UserStack },
    ME: { screen: ProfileStack },
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'HOME') {
          iconName = require('./Images/tab_home.png');
          iconNameFocused = require('./Images/tab_home_selected.png');
        } else if (routeName === 'SEARCH') {
          iconName = require('./Images/tab_search.png');
          iconNameFocused = require('./Images/tab_search_selected.png');
        } else if (routeName === 'ADDMORE') {
          iconName = require('./Images/tab_add_more.png');
          iconNameFocused = require('./Images/tab_add_more_selected.png');
        } else if (routeName === 'USER') {
          iconName = require('./Images/tab_Users.png');
          iconNameFocused = require('./Images/tab_Users_selected.png');
        } else if (routeName === 'ME') {
          iconName = require('./Images/tab_me.png');
          iconNameFocused = require('./Images/tab_me_selected.png');
        }
        if(focused)
        return ( <Image style={{width: 20, height: 20, tintColor }} source={iconNameFocused} /> );
        else
        return ( <Image style={{width: 20, height: 20, tintColor }} source={iconName} /> );
      },
    }),
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: '#ca375e',
      inactiveTintColor: '#c7c7c7',
    },
    animationEnabled: false,
    swipeEnabled: false,
  }
);

const App = createAppContainer(TabNavigator);

export default App;

如何将其隐藏在初始页面中并在用户登录后显示?

推荐答案

先做一个来宾 Navigator

make a guest Navigator first

const GuestNavigator = createStackNavigator({
  LoginScreen,
  SignupScreen,
});

之后在 createAppContainer 中 addSwitchNavigator

after that addSwitchNavigator in createAppContainer

const createRootNavigator = (signedIn = false) =>
  createAppContainer(
    createSwitchNavigator(
      {
        SignedIn: {
          screen: TabNavigator,
        },
        SignedOut: {
          screen: GuestNavigator,
        },
      },
      {
        initialRouteName: signedIn ? 'SignedIn' : 'SignedOut',
      },
    ));
return createRootNavigator;

有关更多信息，请查看 SwitchNavigator 文档

for more check SwitchNavigator documentation

这篇关于React Native:如何在登录前隐藏底部栏并在用户登录后显示它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！