有没有一种简单的方法可以在 React Navigation V2 的抽屉中创建一个注销按钮？答案

【问题标题】：Is there an easy way to create a logout button in the drawer in React Navigation V2?有没有一种简单的方法可以在 React Navigation V2 的抽屉中创建一个注销按钮？
【发布时间】：2018-08-06 09:08:33
【问题描述】：

我想在我的抽屉里有注销按钮。问题是它不应该渲染屏幕，而只是直接注销。有没有简单的方法（例如以某种方式修改contentOptions'items 或onItemPressed 属性？我想不通。

我现在正在做的是写一个带有注销按钮的CustomDrawerComponent，但是很难让样式正确并且看起来像另一个DrawerItems。

【问题讨论】：

“它不应该呈现屏幕”是什么意思，您不希望它被重定向到您的登录流程吗？
@Deepak 是的，我希望它重定向到我的登录屏幕。但除此之外，它还应该注销用户，这意味着它应该执行一些额外的逻辑，比如清除令牌。

标签： react-native react-navigation drawer

【解决方案1】：

这是我使用自定义组件解决此问题的方法。也许有不同的方法？

import React, { PureComponent } from "react";
import { Image, ScrollView, Text, TouchableOpacity } from "react-native";
import { DrawerItems, SafeAreaView } from "react-navigation";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import { clearToken } from "../../api/secureStorage/secureStorage";
import { BUTTON_TEXT_LOGOUT } from "../../config/constants/buttonTexts";
import { logout } from "../../redux/actions/logout/logout";
import styles from "./styles";

export class BurgerMenu extends PureComponent {
  static propTypes = {
    navigation: PropTypes.object,
    logout: PropTypes.func.isRequired
  };

  logout = () => {
    const { navigation, logout } = this.props;
    clearToken().then(() => {
      logout();
      navigation.navigate("LoginScreen");
    });
  };

  render() {
    const { logout, ...strippedProps } = this.props; // eslint-disable-line no-unused-vars
    return (
      <SafeAreaView style={styles.container} forceInset={{ top: "always", horizontal: "never" }}>
        <ScrollView>
          <DrawerItems {...strippedProps} />
        </ScrollView>
        <TouchableOpacity style={[styles.footer, styles.item]} onPress={this.logout}>
          <Image
            source={require("../../assets/icons/exit.png")}
            style={styles.icon}
            resizeMode="contain"
          />
          <Text style={styles.text}>{BUTTON_TEXT_LOGOUT}</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

export default connect(
  null,
  { logout }
)(BurgerMenu);

【讨论】：