Question

我在实现底部导航栏时遇到问题，这是我的代码

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { fromLeft, fromBottom, fadeOut, fromRight } from 'react-navigation-transitions';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import constants from '../utilities/index';
import { Image, Dimensions } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';

/***************************** Routes ***************************************/
import MainScreen from '../screens/MainScreen/MainScreen';
import AuthScreen from '../screens/Auth/AuthScreen'
import Login from '../screens/Auth/Login'
import Register from '../screens/Auth/Register'
import ForgorPasswordScreen from '../screens/Auth/ForgotPasswordScreen'
import PasswordSentScreen from '../screens/Auth/PasswordSentScreen'
import PapperScreen from '../screens/Papper/PapperScreen'
import SpecialitySearch from '../screens/Speciality/SpecialitySearch'
import SpecialityNotFound from '../screens/Speciality/SpecialityNotFound'
const { width, height } = Dimensions.get('window');

const tabBasedNavigation = createBottomTabNavigator({
  Home: {
    screen: PapperScreen, navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.HomeActive : constants.images.HomeActiveInactive} />
        )
      }
    }
  },
  Booking: {
    screen: SpecialitySearch, navigationOptions: {
      tabBarLabel: 'Booking',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.BookingActive : constants.images.BookingInactive} />
        )
      }
    }
  },
  Chat: {
    screen: PapperScreen, navigationOptions: {
      tabBarLabel: 'Chat',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.ChatActive : constants.images.ChatInActive} />
        )
      }
    }
  },
  Account: {
    screen: SpecialitySearch, navigationOptions: {
      tabBarLabel: 'Account',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.AccountActive : constants.images.AccountInActive} />
        )
      }
    }
  },
}, {
    tabBarOptions: {
      activeTintColor: constants.colors.dullYellow,
      labelStyle: {
        fontFamily: constants.fontFamily.HKGroteskRegular,
        fontSize: RFValue(12),
        marginBottom: height * 1 / 100
      },
      style: {
        height: height * 9 / 100,
      },
    }
  });

const BeforeLoginStack = createStackNavigator({
  MainScreen,
  AuthScreen,
  Login,
  Register,
  ForgorPasswordScreen,
  PasswordSentScreen,

}, {
    transitionConfig: (nav) => handleCustomTransition(nav),
    defaultNavigationOptions: {
      header: null,
    }
  });


const AfterLoginStack = createStackNavigator({
  homeTabs: tabBasedNavigation,
  PapperScreen,
  SpecialitySearch,
  SpecialityNotFound,

}, {
    transitionConfig: (nav) => handleCustomTransition(nav),
    defaultNavigationOptions: {
      header: null,
    }
  }); 


const MainNavigator = createSwitchNavigator({
  BeforeLoginStack,
  AfterLoginStack
});

const handleCustomTransition = ({ scenes }) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];

  // Custom transitions go there
  if (prevScene
    && prevScene.route.routeName === 'MainScreen'
    && nextScene.route.routeName === 'AuthScreen') {
    return fromBottom(500);
  } else if (prevScene
    && ( (prevScene.route.routeName === 'AuthScreen'
    && nextScene.route.routeName === 'ForgorPasswordScreen') || 
    (prevScene.route.routeName === 'ForgorPasswordScreen'
    && nextScene.route.routeName === 'PasswordSentScreen'))) {
    return fromRight(); 
  }
  return fadeOut();
}
export default createAppContainer(MainNavigator);

当我使用多个stackNavigators时出现问题。如果我使用单个堆栈导航器，则底部导航有效。但是当我放置多个多个堆栈导航器时，底部导航不会显示。

 const MainNavigator = createSwitchNavigator({
      AfterLoginStack
    });

如果我仅使用AfterLoginStack，则底部导航栏可见。但是当我如下放置两个堆栈导航器时，底部导航不会显示。

const MainNavigator = createSwitchNavigator({
      BeforeLoginStack,
      AfterLoginStack
    });

请提出解决方案。

Answer 1

您的tabBasedNavigation放在AfterLoginStack内

如果您这样创建SwitchNavigator：

const MainNavigator = createSwitchNavigator({
  BeforeLoginStack,
  AfterLoginStack
});

您的SwitchNavigator的初始路线为BeforeLoginStack，因此当AfterLoginStack出现在屏幕上时，BeforeLoginStack内的BottomTab将不可见。

您应该更改为此：

const MainNavigator = createSwitchNavigator({
    BeforeLoginStack,
    AfterLoginStack
}, {
    initialRouteName: 'AfterLoginStack'
});

React导航底部选项卡不适用于多个堆栈导航器

1 个答案: