我正在尝试在用户按下抽屉项时从抽屉菜单中隐藏注销按钮,但是没有任何作用,当用户按下注销按钮时,有什么方法可以更新或重置我的抽屉菜单吗?用户登录时有什么方法可以显示注销按钮?我在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
}
});