react-native - 单击 react 导航5中的标题图标时打开抽屉

Question

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

问题出在 headerRight 上，图标显示正确，但当我单击它时，出现上述错误。即使我从 props 中获得了 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>
    )
});