createSwitchNavigator中TenantDetails页面头部不显示问题咨询

嘿，我来帮你揪出这个TenantDetails页面头部消失的问题～

核心原因 #

你把TenantDetails直接挂载到了AppSwitchNavigator中，但createSwitchNavigator的设计初衷是处理非返回式的场景切换（比如登录页到主应用的跳转），它本身不会默认提供导航头部，也不会自动继承其他导航器的头部配置。所以当你从Tenants页面跳转到TenantDetails时，页面自然就没有头部了。

两种解决方案 #

方案一：将TenantDetails整合到主应用堆栈导航（推荐）

把TenantDetails从AppSwitchNavigator移到MainStackNavigator里，这样它就能继承堆栈导航的头部配置，同时和主应用的导航逻辑保持一致，用户还能通过头部返回按钮回到Tenants页面。修改后的代码如下：

// 更新MainStackNavigator，加入TenantDetails页面
const MainStackNavigator = createStackNavigator(
  {
    MainTabNavigator,
    TenantDetails: {
      screen: TenantDetails,
      navigationOptions: () => {
        return { headerTitle: 'Tenant' };
      }
    }
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon style={{ paddingLeft: 10 }} onPress={() => navigation.openDrawer()} name="md-menu" size={30} />
        )
      };
    }
  }
);

// 简化AppSwitchNavigator，只保留登录和主应用入口
const AppSwitchNavigator = createSwitchNavigator({
  Login: { screen: Login },
  Main: { screen: AppDrawerNavigator },
});

方案二：给TenantDetails单独套一层堆栈导航

如果确实需要把TenantDetails留在AppSwitchNavigator中，可以给它单独包裹一个createStackNavigator，手动为它添加头部：

// 为TenantDetails单独创建堆栈导航
const TenantDetailsStack = createStackNavigator({
  TenantDetails: {
    screen: TenantDetails,
    navigationOptions: () => {
      return { headerTitle: 'Tenant' };
    }
  }
});

// 更新AppSwitchNavigator，使用包裹后的堆栈
const AppSwitchNavigator = createSwitchNavigator({
  Login: { screen: Login },
  Main: { screen: AppDrawerNavigator },
  TenantDetails: { screen: TenantDetailsStack },
});

内容的提问来源于stack exchange，提问作者myTest532 myTest532