如何在反应导航中从抽屉堆栈导航到开关堆栈？

Question

我正在使用 React-navigation V3。如何从 contentComponent 中的 MenuDrawer 导航到 Swith Navigator 中的登录屏幕？

这是我的开关导航器（我的登录名）。

const AppContainer = createAppContainer(createSwitchNavigator(

  {

    VerifyActiveUser,

    ActProgramadas: MainDrawer,

    Login,

    SyncData

  },

  {

    initialRouteName: 'VerifyActiveUser',

  }

));

export default class StackNavigator extends Component{

  render(){

      return <AppContainer 

      />;

  }

}

这是我的抽屉堆栈（MainDrawer）。MenuDrawer 是我的自定义抽屉，从那里我想使用“退出”按钮转到登录屏幕（来自切换导航器）以结束我的用户会话，但我不知道如何将导航道具发送到我的抽屉的 contentComponent：

const DrawerConfig ={

    drawerWidth: WIDTH * 0.86,

    contentComponent: ({navigation}) => {

        return (<MenuDrawer navigation = { navigation } />);

    },

    contentOptions: {

        activeTintColor: 'blue',

        activeBackgroundColor: 'green'

    },

    initialRouteName: 'ActProgramadas',

    unmountInactiveRoutes: true,

    edgeWidth: WIDTH * 0.80,

    backBehavior: false

}

const MyDrawerNavigator = createDrawerNavigator({

    ActProgramadas: { screen: StackNavigator },

    ActRealizadas: { screen: StackActReal },

    ObsTecnicas: { screen: StackObs },

    ObsPendientes: { screen: StackObsPend },

    ObsRealizadas: { screen: StackObsReal },

    SyncData

}, DrawerConfig);

const AppContainer = createAppContainer(MyDrawerNavigator)

export default class DrawerNavigator extends Component{

    render(){

        return <AppContainer />;

    }

}

我可以使用 redux 将 navigation.navigate('Login') 道具从开关发送到我的自定义抽屉吗？

Answer 1

您可以在抽屉中添加注销屏幕。屏幕是一个 React 组件，它定义了挂载时的注销行为：import React from 'react';import { View, AsyncStorage, ActivityIndicator, StatusBar } from 'react-native';export default class LogoutScreen extends React.Component {&nbsp; async componentDidMount() {&nbsp; &nbsp; &nbsp; await AsyncStorage.clear();&nbsp; &nbsp; &nbsp; this.props.navigation.navigate('Login');&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; <ActivityIndicator />&nbsp; &nbsp; &nbsp; &nbsp; <StatusBar barStyle='default' />&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );&nbsp; }}