React-navigation：在切换导航器中嵌套堆栈导航器和选项卡导航器导致 2 headers

Question

我在带有 react-navigation 的 React 本机应用程序中组合使用选项卡导航器、堆栈导航器和切换导航器。请注意，我必须将选项卡导航器的每个屏幕放在其自己的堆栈导航器中，以便使用内置的 header 功能。

功能有效。但是我最终得到 Feed 和 Profile 页面的 2 headers，像这样：

我只希望每个屏幕都有自己的 header 并且评论屏幕有一个后退按钮。我知道代码不是很干净，将所有这些导航器放在彼此内部会占用大量开销。那么实现这一目标的最佳方法是什么？

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：

已编辑：

我忘了将它包含在导航选项中。试试。

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

      // or this

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

Answer 2

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

让您的 AppStack 实际上只是您的 TabStack 会更干净。在与 TabStack 相同级别的 Comments 屏幕中添加可能无助于解决您的多个 header 问题。

在这里，我将展示如何根据需要完全删除 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 在顶层。让我知道这是否更符合您的需要，我可以 post 更具体！

React-navigation：在切换导航器中嵌套堆栈导航器和选项卡导航器导致 2 headers

React-navigation: nesting stack navigator and tab navigator inside switch navigator results in 2 headers

reactjs

react-native

react-navigation

stack-navigator

tabnavigator