Question

我在使用react-navigation的react native应用程序中使用了选项卡导航器，堆栈导航器和switch导航器的组合。请注意，我必须将选项卡导航器的每个屏幕放入其自己的堆栈导航器中，以便使用内置的标题功能。

功能正常运行。但是最终我得到了Feed和Profile页面的2个标题，如下所示：

我只希望每个屏幕都有其自己的标题，而注释屏幕则具有后退按钮。我知道代码不是很干净，将所有这些导航器相互放在一起会占用大量开销。那么实现这一目标的最佳方法是什么？

App.js

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const AppStack = createStackNavigator({ 
  Tab: TabStack,
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
});

const MainStack = createSwitchNavigator(
  {
    Home: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

Answer 1

尝试像这样修改AppStack：

编辑：

我忘记了将其包含在navigationOptions中。尝试。

const AppStack = createStackNavigator({ 
  Tab: {
    screen:TabStack,
    navigationOptions: () => ({
      headerMode: 'none',

      // or this

      header: null
     })
  },
  Comments: {
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
},
);

Answer 2

您说过，您希望Comments屏幕具有自己的标题（与所有其他屏幕一样）和后退按钮。 它应该具体返回什么？了解导航的结构将使其更容易设计。

让您的AppStack实际上只是您的TabStack会更清洁。在Comments屏幕上添加与TabStack相同级别的内容可能无法解决多页眉问题。

这里，我展示了如何根据您的需要完全切出AppStack并将Comments嵌套在Profile标签的Feed中。

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  },
  // if you want Comments to go back to "Feed"
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  },
  // if you want Comments to go back to "Profile"
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

但是，如果您实际上希望Comments位于Profile和Feed上方，则应使其成为自己的标签，或将其更改为Modal顶层。让我知道这是否更符合您的需求，我可以发布更多细节！

反应导航：在开关导航器内部嵌套堆栈导航器和选项卡导航器会产生2个标题

2 个答案: