React Navigation：一个带堆栈的抽屉，你想在某些屏幕上隐藏抽屉，但它不会隐藏

Question

我正面临描述的情况 in the docs，我有一个带堆栈的抽屉，我想在某些屏幕上隐藏抽屉。不幸的是，受文档影响，下面的代码不起作用，抽屉仍然可以在推送的堆栈屏幕上打开。

const MenuStack = createStackNavigator(
  {
    CheckedInMenu: { screen: MenuScreen },
    CheckedIdMenuItemDetail: { screen: MenuItemDetailScreen }
  },
  {
    navigationOptions: ({ navigation }) => {
      let options = {
        headerTitleStyle: {
          color: headerColor
        },
        headerBackTitleStyle: {
          color: headerColor
        },
        headerTintColor: headerColor
      };
      let drawerLockMode = "unlocked";
      if (navigation.state.index > 0) {
        drawerLockMode = "locked-closed";
      }
      return { ...options, drawerLockMode };
    }
  }
);

const checkedInDrawer = createDrawerNavigator(
  {
    MenuStack: {
      screen: MenuStack,
      navigationOptions: {
        drawerLabel: SCREEN_TEXT_MENU_HEADER,
        drawerIcon: ({ tintColor }) => (
          <Image
            source={require("../assets/icons/menu.png")}
            resizeMode="contain"
            style={{ width: 25, height: 25, tintColor: tintColor }}
          />
        )
      }
    }
  },
  {
    initialRouteName: "MenuStack",
    drawerBackgroundColor: backgroundColor,
    contentComponent: BurgerMenu,
    contentOptions: {
      activeTintColor: activeTintColor,
      inactiveTintColor: headerColor,
      activeBackgroundColor: backgroundColor,
      itemStyle: { borderBottomWidth: 1, borderColor: borderColor },
      labelStyle: { fontSize: 16, fontWeight: "500" }
    }
  }
);

我做错了什么？

编辑

即使我console.log()一切都是这样:

  let options = {
    headerTitleStyle: {
      color: headerColor
    },
    headerBackTitleStyle: {
      color: headerColor
    },
    headerTintColor: headerColor
  };
  let drawerLockMode = "unlocked";
  console.log(navigation);
  if (navigation.state.routeName !== "CheckedInMenu") {
    drawerLockMode = "locked-closed";
  }
  if (navigation.state) console.log(navigation.state.routeName);
  console.log({ ...options, drawerLockMode: drawerLockMode });
  return { ...options, drawerLockMode: drawerLockMode };

它在 CheckedInMenuItemDetailScreen 上显示 drawerLockMode = "locked-closed"。

编辑 2： 我现在发现实现这一目标的唯一方法正是文档所说的方式。你必须这样做：

MainStack.navigationOptions = ({ navigation }) => {
  let drawerLockMode = "unlocked";
  if (navigation.state.index > 0) {
    drawerLockMode = "locked-closed";
  }
  return {
    drawerLockMode
  };
};

并且您必须尝试在堆栈定义的导航选项中执行此操作，就像我在上面的原始 post 中所做的那样。请记住这一点！

Answer 1

此代码有效。当导航到 DetailsScreen 时，DrawerMenu 是隐藏的。我已经使用你的 referenced the offical docs here.

实现了它

import React, { Component } from 'react';
import { Platform, StyleSheet, TouchableHighlight, Text, View } from 'react-native';

import { createStackNavigator, createDrawerNavigator, createSwitchNavigator } from 'react-navigation';




class ProfileScreen extends Component {
    render() {
        return (
            <View>
                <Text> ProfileScreen </Text>
            </View>
        )
    }
}

class DetailsScreen extends Component {
    render() {
        return (
            <View>
                <Text> DetailsScreen </Text>
            </View>
        )
    }
}


class HomeScreen extends Component {
    render() {
        const { navigate } = this.props.navigation
        return (
            <View>
                <Text> HomeScreen </Text>
                <TouchableHighlight
                    onPress={() => navigate("Details", { screen: "DetailsScreen" })}
                >
                    <Text>Screen One </Text>
                </TouchableHighlight>
            </View>
        )
    }
}


const FeedStack = createStackNavigator({
    FeedHome: {
        screen: HomeScreen,
        navigationOptions: {
            title: "test"
        }
    },
    Details: DetailsScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
    let drawerLockMode = 'unlocked';
    if (navigation.state.index > 0) {
        drawerLockMode = 'locked-closed';
    }

    return {
        drawerLockMode,
    };
};

const DrawerNavigator = createDrawerNavigator({
    Home: FeedStack,
    Profile: ProfileScreen,
});

const AppNavigator = createSwitchNavigator(
    {
        Drawer: DrawerNavigator,
    }
);

export default class App extends Component {
    render() {
        return (
            <View style={{ flex: 1 }} >
                <AppNavigator />
            </View>
        );
    }
}

React Navigation：一个带堆栈的抽屉，你想在某些屏幕上隐藏抽屉，但它不会隐藏

React Navigation: A drawer with a stack and you want to hide the drawer on certain screens, but it doesn't hide

drawer

react-native

react-navigation

编辑