在反应导航 5 中单击 header 图标时打开抽屉

Question

我正在努力使用 React Navigation 5 打开抽屉，当我点击图标时，我收到了这个错误 undefined is not an object (evaluating 'navigation.openDrawer')

问题出在 headerRight，图标显示正确，但当我点击它时，出现上述错误。即使我从道具中得到 navigation 我也不明白为什么我不能用它来调用 openDrawer()

我也测试了navigation.toggleDrawer()它显示了同样的错误。

我错过了什么？

export default function App({ navigation }) {

  const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();

  const defaultOptions = {
    headerStyle: {
      backgroundColor: Colors.primary
    },
    headerTitleStyle: {
      fontFamily: "raleway-bold"
    },
    headerBackTitleStyle: {
      fontFamily: "raleway-regular"
    },
    headerTintColor: "white",
    headerRight: () => (
      <TouchableOpacity onPress={() => navigation.openDrawer()}>
        <Ionicons
          name={Platform.OS === "android" ? "md-menu" : "ios-menu"}
          size={32}
          color="white"
          style={styles.menu}
        />
      </TouchableOpacity>
    )
  };

  const createHomeStack = () => (
    <Stack.Navigator>
      <Stack.Screen
        name="Dashboard"
        component={DashboardScreen}
        options={defaultOptions}
      />
      <Stack.Screen
        name="AddExperience"
        component={AddExperienceScreen}
        options={defaultOptions}
      />
      <Stack.Screen
        name="AddEducation"
        component={AddEducationScreen}
        options={defaultOptions}
      />
    </Stack.Navigator>
  );

 return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" children={createHomeStack} />
        <Drawer.Screen name="Dashboard" component={DashboardScreen} />
        <Drawer.Screen name="Profiles" component={ProfilesScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Answer 1

也许试试：

const defaultOptions = ({ navigation }) => ({
    headerLeft: () => (
        headerStyle: {
      backgroundColor: Colors.primary
    },
    headerTitleStyle: {
      fontFamily: "raleway-bold"
    },
    headerBackTitleStyle: {
      fontFamily: "raleway-regular"
    },
    headerTintColor: "white",
    headerRight: () => (
      <TouchableOpacity onPress={() => navigation.openDrawer()}>
        <Ionicons
          name={Platform.OS === "android" ? "md-menu" : "ios-menu"}
          size={32}
          color="white"
          style={styles.menu}
        />
      </TouchableOpacity>
    )
});

在反应导航 5 中单击 header 图标时打开抽屉

Open drawer when click on header icon in react navigation 5

react-native

navigation

version

native