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的抽屉中创建注销按钮？

1 个答案: