onPress函数用于DrawerNavigator

Question

我已经在我的react本地应用程序中创建了一个DrawerNavigator，它如下所示。我只是不喜欢默认的标题，反应-本机给予。所以我想通过一个图标来访问它。我猜还使用了onPress条件

import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

// importing of all screens


const Drawer = createDrawerNavigator();

const DrawerContent = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={CategoryStack}
      />
      <Drawer.Screen name="Aboutus" component={Aboutus} />
      <Drawer.Screen name="Interest Recieved" component={InterestRecieved} />
   
    </Drawer.Navigator>
  );
};

const Stack = createStackNavigator();

const MainStack = () => {
  return (
    <Stack.Navigator>

      <Stack.Screen
        name="Loading"
        component={Loading}
        options={{ headerShown: false }}
      />
  
    </Stack.Navigator>
  );
};

export default MainStack;

如何使用图标的onPress打开它？谢谢!

Answer 1

响应导航useNavigation钩子公开抽屉操作- toggleDrawer、openDrawer和closeDrawer事件处理程序，您可以使用这些操作打开或关闭抽屉。

import React from "react";
import { View, Text, StyleSheet, Pressable } from "react-native";
import { useNavigation } from "@react-navigation/native";

const ToggleDrawer = () => {
  const { toggleDrawer,closeDrawer,openDrawer } = useNavigation();

  return (
    <Pressable onPress={toggleDrawer}>{/** Add your Icon Here */}</Pressable>
  );
};

您可以查看深度抽屉实例。

Answer 2

在标题选项中，您可以自定义标题，例如在左上角添加一个图标，如下所示。

useLayoutEffect(() => {
    navigation.setOptions({
        title: 'ScreenName',
        
        headerLeft: () => (
            <View style={{ marginLeft: 15 }}>
                <TouchableOpacity onPress={() => navigation.openDrawer()} >
                    {*INSERT ICON HERE*}
                </TouchableOpacity>
            </View>
        ),
    })

})