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

Question

我想在抽屉里有退出按钮。问题是它不应该渲染屏幕，而是直接注销。有没有一个简单的方法来做到这一点（例如以某种方式修改contentOptions'items或onItemPressed属性？我无法弄明白。

我现在正在做的是写一个带有注销按钮的CustomDrawerComponent，但很难让它的样式正确，看起来和其他DrawerItems相似。

Answer 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);