如何使用 React Navigation V5 在我的抽屉中添加注销按钮

Question

如何将自定义注销按钮添加到我的抽屉？我尝试了几件事，但似乎找不到解决方案。这就是我卡住的地方。

import React from 'react';
import {TouchableOpacity, Image, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';

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

// Screens
import HomeScreen from '../containers/HomeContainer';

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="My Thoughts"
        component={HomeScreen}

      />
    </HomeStack.Navigator>
  );
};

function DrawerNavigation() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeStackSceen} />
      <TouchableOpacity>
       <Text>Logout</Text>
      </TouchableOpacity>
    </Drawer.Navigator>
  );
}

export const AppNavigation = () => {
  return (
    <NavigationContainer>
      <DrawerNavigation/>
    </NavigationContainer>
  );
};

我收到一个错误，指出只能添加屏幕，参考TouchableOpacity

Answer 1

您可以将其用于自定义内容https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent

import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';


function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Help" onPress={() => alert('Link to help')} />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}