有没有一种简单的方法可以在 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);

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

Is there an easy way to create a logout button in the drawer in React Navigation V2?

drawer

react-native

react-navigation