Как добавить кнопку выхода на мой ящик с помощью React Navigation V5 - PullRequest
Новая
       45

Как добавить кнопку выхода на мой ящик с помощью React Navigation V5

1 голос
/ 20 апреля 2020

Как добавить пользовательскую кнопку выхода в мой ящик? Я попробовал несколько вещей, и я не могу найти решение. Вот где я застрял. 

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

1 Ответ

0 голосов
/ 21 апреля 2020

Вы можете использовать это для пользовательского контента https://reactnavigation.org/docs/drawer-navigator/#providing -a-custom-knifecontent 

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