标头在createSwitchNavigator中不起作用

时间:2019-06-28 20:30:08

标签: react-native react-native-navigation

我的createSwitchNavigator具有3页:登录(无标题)。登录后,它将发送到主页,在其中构建我的底部,标签,堆栈和抽屉导航器。

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中未显示标题。为什么?

1 个答案:

答案 0 :(得分:1)

开关导航器没有标题。您可以改用堆栈导航器。 示例代码:

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);