反应导航：切换导航器内的嵌套堆栈导航器和选项卡导航器产生2个标头

Question

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

功能有用。但我最终获得了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

你说你想让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。让我知道这是否更像你需要的东西，我可以发布更多细节！

Answer 2

尝试修改AppStack像这样：

编辑：

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

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

      // or this

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