单击反应导航5中的标题图标时打开抽屉

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