Javascript React native通过与redux集成的已调度操作向抽屉组件添加注销按钮

我刚刚接触RN。我的配置文件夹中有一个routes.js，其中定义了所有drawerNavigator和stackNavigator。看起来是这样的

import { createStackNavigator, createDrawerNavigator, DrawerItems } from "react-navigation";


import Home from "../screens/home";
import Login from "../screens/login";
import DrawerComponent from "../components/drawer"

export const MainStack = createDrawerNavigator({
  Home: Home
}, {
  contentComponent: DrawerComponent,
  contentOptions: {
    activeTintColor: 'green'
  }
});

export const LoginStack = createStackNavigator({
  Login: {
    screen: Login
  }
});

现在，我的路线导航一切正常，但我想在抽屉导航中添加一个注销按钮，该按钮不会导航到某个页面。相反，我希望调度一个异步redux操作，该操作将调用函数并调用API请求。如果成功，则用户将被重定向到登录堆栈

这是我在drawer.js中的代码，它是一个组件

import React, { Component } from "react";
import { SafeAreaView, ScrollView, View, Image, Button } from 'react-native';
import { DrawerItems } from "react-navigation";

const DrawerComponent = (props) => (
    <SafeAreaView style={{ flex: 1 }}>
        <View style={{ height: 150, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }}>
            <Image source={{ uri: 'http://i.pravatar.cc/300' }}
                style={{ height: 120, width: 120, borderRadius: 60 }} />
        </View>
        <ScrollView>
            <DrawerItems {...props} />
            <Button title="LOG OUT" onPress={() => this.props.onPress()}/>
        </ScrollView>
    </SafeAreaView>
)

export default DrawerComponent

现在，我在我的home.js中显示的代码运行良好。它注销用户并重定向到登录堆栈，但我想在抽屉组件中传输它如何以正确的方式进行

主要问题是如何处理抽屉组件中的注销按钮的

onProps

按下事件。更高级别的组件应该是处理事件以调度行动的组件，对吗

现在，因为我正在使用routes.js文件中的抽屉组件。我应该连接redux吗？如果没有，我将在哪里处理该事件。如果你能展示一些代码，那就更好了

如果有人能帮忙，我将不胜感激。 提前谢谢

<CustomButton onPress={() =>
            this.props.actions.logout(this.props.state.authSession.token)
          } title={"SIGN OUT"} />

export default connect(
  state => ({ state: state.authenticate }),
  dispatch => ({
    actions: bindActionCreators(authActions, dispatch)
  })
)(Home)