包含选项卡式导航器的Stacknavigator忽略以下路线之一

时间:2019-02-26 12:41:52

标签: reactjs react-native react-navigation jsx nested-routes

我有一个StackNavigator,其中包含一个选项卡式导航器(具有两个选项卡)和一条路由CreateReviewsScreen,该路由不在选项卡式导航器内。当我尝试从CreateReviewsScreen导航回到选项卡式导航器时,我无法这样做。我相信这是因为在构建时忽略了一条路由CreateReviewsScreen。

在我的应用容器的navigationRef中,只有选项卡式导航器“ Tabs”。缺少“ CreateReviewScreen”。下图中的长度应为2而不是1。

enter image description here

代码的相关部分:

TabNav.js

import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { ReviewsScreen, VenuesScreen, CreateReviewsScreen } from '../scenes';
import { APP_COLORS } from '../styles/Global';

const mainTabs = createBottomTabNavigator(
  {
    Reviews: ReviewsScreen,
    Venues: VenuesScreen
  },
  {
    initialRouteName: 'Reviews',
    backBehavior: 'Reviews',
    tabBarOptions: {
      activeTintColor: APP_COLORS.FORE,
      labelStyle: {
        fontSize: 18,
        textAlign: 'center'
      },
      style: {
        backgroundColor: APP_COLORS.PRI_LGHT,
      },
    }
  }
);

export default createStackNavigator({
  Tabs: mainTabs,
  CreateReviews: CreateReviewsScreen
});

Navigation.js

import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import { createAppContainer } from '@react-navigation/native';
import { LoggedOutScreen, LoginScreen, RegisterScreen, UserProfileScreen } from './scenes/index';
import TabNav from './Drawer/TabNav';


const AuthStack = createStackNavigator({
  LoggedOut: { 
   screen: LoggedOutScreen, 
   navigationOptions: {
     header: null
   }
  },
  Login: {
    screen: LoginScreen, 
    navigationOptions: {
      title: 'Login'
    }
  },
  Register: {
    screen: RegisterScreen,
    navigationOptions: {
      title: 'Sign up!'
    }
  },
  UserProfile: {
    screen: UserProfileScreen,
    navigationOptions: {
      title: 'Your Profile'
    }
  }
});

export default createAppContainer(createSwitchNavigator(
  {
    Main: TabNav,
    Auth: AuthStack
  }, 
  {
    initialRouteName: 'Auth',
  }
));

2 个答案:

答案 0 :(得分:0)

尝试this.props.navigation.goBack(null)

答案 1 :(得分:0)

事实证明我没有观察到正确的错误。回到上一个堆栈项的行为正在发生,但是由于Expo中的远程调试而导致了10秒的延迟。我只是没有等很长时间才重新启动应用程序,以查看这是问题所在。禁用远程调试可使后退按钮立即工作。