Question

我正在使用react-navigation在react-native中开发一个应用程序。我真的很喜欢这个库及其灵活性，但是出于对我的爱，我似乎无法根据我拥有的架构嵌套导航器。

该模式实际上并没有那么复杂，因此我将尝试用单词以及一个小模式来解释它。我的应用程序将有一个启动屏幕，在此期间我将执行一些逻辑（初始化商店等）。下一个屏幕基于此逻辑，并且可能会显示教程屏幕或房屋本身。

用户完成本教程后，将导航到主屏幕。

如果用户来自主屏幕，则该用户不应从主屏幕返回该教程。

在主屏幕中，我需要一个抽屉式导航器，该导航器可以显示N个屏幕。每个屏幕都应该只有一个标题和后退按钮，才能回到首页。该屏幕之一是教程本身，其行为应与第一次相同。

总而言之：

飞溅；
教程（可选）
主页
- Screen1;
- Screen2;
- ....
- 教程。

这是我的导航器的代码：

import { createStackNavigator, createAppContainer, createDrawerNavigator, createSwitchNavigator } from 'react-navigation';
import HomeScreen from './home';
import Details from './details';
import SplashScreen from './splash';
import Tutorial from './tutorial';

const TutorialStack = createStackNavigator(
  { Tutorial },
  {
    mode:       'modal',
    headerMode: 'none'
  }
);

const DrawerNavigator = createDrawerNavigator(
  {
    Tutorial,
    SplashScreen,
    Home: HomeScreen,
    Details
  },
  {
    defaultNavigationOptions: {
      drawerLockMode: 'locked-closed'
    },
    drawerBackgroundColor: 'rgba(255,255,255,.5)',
    overlayColor:          '#6b52ae',
    contentOptions:        {
      activeTintColor:       '#fff',
      activeBackgroundColor: '#6b52ae'
    }
  }
);

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    DrawerNavigator
  },
  {
    initialRouteName:         'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e'
      },
      headerTintColor:  '#fff',
      headerTitleStyle: {
        fontWeight: 'bold'
      }
    }
  },
);

const AppNavigator = createSwitchNavigator({
  SplashScreen,
  TutorialStack,
  RootStack
}, {
  mode:       'modal',
  headerMode: 'none'
});

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

我几乎正确地获得了过渡，但是：

如果我尝试返回本教程，则可以（而且我还从下一个导航器继承了标题）
我可以从屏幕（例如“详细信息”）返回家中，当我到达那里时，我会收到另一个“后退”箭头-这样，我就可以无限次地从家中来回浏览详细信息。

我知道我在嵌套中做错了什么，但我似乎无法正确完成。

感谢任何能帮助我的人！

我似乎无法以适当的方式嵌套导航器

0 个答案: