React-Native中react-navigation问题：抽屉不关闭及导航栏异常

我来帮你搞定这两个导航相关的问题，咱们一步步调整代码来解决：

问题1：点击抽屉项时抽屉无法关闭 #

你用了自定义的contentComponent: DrawerMenu，默认抽屉项的自动关闭逻辑就失效了，得在DrawerMenu组件里给每个菜单点击事件手动加上关闭抽屉的操作：

假设你的DrawerMenu是用TouchableOpacity渲染菜单项，修改每个点击逻辑：

// 在DrawerMenu的菜单项点击处理中
onPress={() => {
  navigation.navigate('目标页面'); // 比如'Home'、'Calendar'这类抽屉页面
  navigation.closeDrawer(); // 加上这行，点击后自动关闭抽屉
}}

如果你的DrawerMenu没收到navigation props，记得在DrawerStack里把props传递过去：

const DrawerStack = createDrawerNavigator(
  { Main: { screen: AppStack } },
  {
    contentComponent: props => <DrawerMenu {...props} />, // 把navigation等props传给自定义菜单
    // 其他原有配置...
  }
);

问题2：跳转非抽屉页面时导航栏未更新、无返回按钮 #

你当前给AppStack全局固定了headerLeft为菜单按钮、title为"My app"，导致所有页面都用这套配置。需要动态判断当前路由，调整导航栏内容：

修改AppStack的navigationOptions：

const AppStack = createStackNavigator(
  {
    Home: { screen: HomeContainer },
    Calendar: { screen: LaunchContainer },
    Comunitate: { screen: TabStack, navigationOptions: { title: "Comunitate" } },
    Logout: { screen: LogoutContainer },
    ChatMessage: { screen: ChatContainer, navigationOptions: { title: "聊天" } }, // 给非抽屉页面单独设置标题
  },
  {
    headerMode: "float",
    navigationOptions: ({ navigation }) => {
      // 判断当前页面是否属于抽屉主菜单里的页面
      const isDrawerScreen = ['Home', 'Calendar', 'Comunitate', 'Logout'].includes(navigation.state.routeName);
      
      return {
        ...AppConfig.navbarProps,
        // 动态设置标题：优先用页面自身配置，没有则用默认值
        title: navigation.getParam('title', navigation.state.routeName === 'Comunitate' ? "Comunitate" : 'My app'),
        // 动态切换头部左侧按钮：抽屉页面显示菜单，其他页面显示返回
        headerLeft: isDrawerScreen ? (
          <Icon 
            name="menu" 
            containerStyle={styles.iconStyle} 
            color="#fff" 
            size={30} 
            onPress={() => navigation.toggleDrawer()} 
          />
        ) : (
          <Icon 
            name="arrow-back" 
            containerStyle={styles.iconStyle} 
            color="#fff" 
            size={30} 
            onPress={() => navigation.goBack()} 
          />
        ),
      };
    },
  }
);

这样调整后：

• 处于抽屉主页面时，显示菜单按钮；
• 跳转到ChatMessage这类非抽屉页面时，自动显示返回按钮，标题也会对应更新。

如果需要跳转时自定义标题，还可以这么传参：

navigation.navigate('ChatMessage', { title: '和XXX的聊天' });

关键修改后的完整代码片段 #

// 调整DrawerStack，传递props给自定义抽屉菜单
const DrawerStack = createDrawerNavigator(
  { Main: { screen: AppStack } },
  {
    contentComponent: props => <DrawerMenu {...props} />,
    contentOptions: {
      activeTintColor: "white",
      activeBackgroundColor: "white",
    },
    drawerWidth: AppSizes.screen.width > 250 ? AppSizes.screen.width - 80 : 250,
  }
);

// 调整AppStack的导航配置
const AppStack = createStackNavigator(
  {
    Home: { screen: HomeContainer },
    Calendar: { screen: LaunchContainer },
    Comunitate: { screen: TabStack, navigationOptions: { title: "Comunitate" } },
    Logout: { screen: LogoutContainer },
    ChatMessage: { screen: ChatContainer, navigationOptions: { title: "聊天" } },
  },
  {
    headerMode: "float",
    navigationOptions: ({ navigation }) => {
      const isDrawerScreen = ['Home', 'Calendar', 'Comunitate', 'Logout'].includes(navigation.state.routeName);
      
      return {
        ...AppConfig.navbarProps,
        title: navigation.getParam('title', navigation.state.routeName === 'Comunitate' ? "Comunitate" : 'My app'),
        headerLeft: isDrawerScreen ? (
          <Icon 
            name="menu" 
            containerStyle={styles.iconStyle} 
            color="#fff" 
            size={30} 
            onPress={() => navigation.toggleDrawer()} 
          />
        ) : (
          <Icon 
            name="arrow-back" 
            containerStyle={styles.iconStyle} 
            color="#fff" 
            size={30} 
            onPress={() => navigation.goBack()} 
          />
        ),
      };
    },
  }
);

最后别忘了在DrawerMenu的每个菜单项点击事件里加上navigation.closeDrawer()，这样点击抽屉项后就能自动关闭抽屉了。

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