Header 在 createSwitchNavigator 中不工作

Question

我的 createSwitchNavigator 有 3 个页面：登录（没有 header）。登录后，它会发送到我构建底部、选项卡、堆栈和抽屉导航器的主页。

const MainTabNavigator = createBottomTabNavigator({
    Home,
    Tenants,
    WorkOrders: {
      screen: WorkOrders,
      navigationOptions: {
        title: 'Work Orders'
      }
    }
}, {
  navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      if (routeName === 'WorkOrders') {
        return {
          headerTitle: 'Work Orders'
        };
      }
      return {
        headerTitle: routeName
      };
  }
});

const MainStackNavigator = createStackNavigator({
    MainTabNavigator
}, {
  defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon
            style={{ paddingLeft: 10 }}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        )
      };
    }
});

const AppDrawerNavigator = createDrawerNavigator({
  iRent: {
    screen: MainStackNavigator
  }
});

const AppSwitchNavigator = createSwitchNavigator({
  Login: { screen: Login },
  Main: { screen: AppDrawerNavigator },
  TenantDetails: {
    screen: TenantDetails,
    navigationOptions: () => {
      return {
        headerTitle: 'Tenant'
      };
    }
  },
});

const AppContainer = createAppContainer(AppSwitchNavigator);

我从租户导航到 TenantDetails 页面，但在 TenantDetails 中未显示 header。为什么？

Answer 1

切换导航器没有header。您可以改用堆栈导航器。示例代码：

const AppStackNavigator = createStackNavigator({
    Login: {
        screen: Login,
        navigationOptions:{
            header: null  // to override the header, because even if you don't specify the header title, a header will be shown.
        }
    },
    Main: {
        screen: AppDrawerNavigator,
        navigationOptions:{
            header: null  
        }
    },
    TenantDetails: {
        screen: TenantDetails,
        navigationOptions: {
            headerTitle: 'Tenant',
            headerLeft: null  // If you want to override the back button, use this.
        }
    },
});

const AppContainer = createAppContainer(AppStackNavigator);

Header 在 createSwitchNavigator 中不工作

Header not working in createSwitchNavigator

react-native

react-native-navigation