隐藏抽屉菜单中的注销按钮

时间:2020-02-25 16:56:10

标签: reactjs react-native navigation-drawer react-navigation stack-navigator

我正在尝试在用户按下抽屉项时从抽屉菜单中隐藏注销按钮,但是没有任何作用,当用户按下注销按钮时,有什么方法可以更新或重置我的抽屉菜单吗?用户登录时有什么方法可以显示注销按钮?我在EXPO中使用React Navigation 4.0

Navigation.js

import React from "react";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import JornadaScreenStacks from "./JornadaStacks";
import CustomComponent from "./CustomDrawerComponent";

const NavigationStacks = createDrawerNavigator(
  {
    Jornada: {
      screen: JornadaScreenStacks,
      navigationOptions: () => ({
        topBarLabel: "Jornada"
      })
    }
  },
  {
    contentComponent: props => <CustomComponent {...props} />,
    order: ["Jornada"]
  }
);

export default createAppContainer(NavigationStacks);

JornadaStacks.js

import React, { useState } from "react";
import { createStackNavigator } from "react-navigation-stack";
import JornadaScreen from "../screens/Jornada/Jornada";
import FormCodigoScreen from "../screens/Jornada/FormCodigo";
import EscanearCodigoScreen from "../screens/Jornada/QRScanner";
import PaneltrabajadorScreen from "../screens/Jornada/PanelTrabajador";

const JornadaScreenStacks = createStackNavigator({
  Jornada: {
    screen: JornadaScreen,
    navigationOptions: () => ({
      title: "Valida tu código",
      headerTintColor: "white",
      headerStyle: {
        backgroundColor: "#753e9c"
      }
    })
  },
  FormCodigo: {
    screen: FormCodigoScreen,
    navigationOptions: () => ({
      title: "Introduce tu código",
      headerTintColor: "white",
      headerStyle: {
        backgroundColor: "#753e9c"
      }
    })
  },
  EscanearCodigo: {
    screen: EscanearCodigoScreen,
    navigationOptions: () => ({
      title: "Escanea el código QR",
      headerTintColor: "white",
      headerStyle: {
        backgroundColor: "#753e9c"
      }
    })
  },
  Paneltrabajador: {
    screen: PaneltrabajadorScreen,
    navigationOptions: () => ({
      title: "Mi Jornada",
      headerLeft: () => null,
      headerTintColor: "white",
      headerStyle: {
        backgroundColor: "#753e9c"
      }
    })
  }
});

export default JornadaScreenStacks;

CustomdrawerComponent.js

import React, { useState, useEffect } from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import SafeAreaView from "react-native-safe-area-view";
import { DrawerNavigatorItems } from "react-navigation-drawer";
import { Icon } from "react-native-elements";
import { cerrarSesion, isLogeado } from "../utils/acces_control";
import {
  withNavigation,
  NavigationActions,
  StackActions
} from "react-navigation";

function CustomDrawerContentComponent(props) {
  const [es_logeado, setEs_logeado] = useState(false);
  const { navigation } = props;
  useEffect(() => {
    async function logeado() {
      let login = await isLogeado();
      if (login === "true") {
        setEs_logeado(true);
      }
    }
    logeado();
  }, [es_logeado]);
  return (
    <ScrollView>
      {es_logeado && (
        <View style={styles.logoutButton}>
          <Icon
            type="material-community"
            name="power-standby"
            onPress={() => {
              cerrarSesion();
              const resetAction = StackActions.reset({
                index: 0,
                key: null,
                actions: [NavigationActions.navigate({ routeName: "Jornada" })]
              });
              navigation.dispatch(resetAction);
            }}
          />
        </View>
      )}
      <SafeAreaView>
        <DrawerNavigatorItems {...props} />
      </SafeAreaView>
    </ScrollView>
  );
}

export default withNavigation(CustomDrawerContentComponent);

const styles = StyleSheet.create({
  logoutButton: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 40
  }
});

0 个答案:

没有答案