如何在反應導航中從抽屜堆棧導航到開關堆棧？

Question

我正在使用React-navigation V3。 如何從contentComponent中的MenuDrawer導航到Swith導航器中的登錄屏幕？

這是我的開關導航器（我的登錄名）。

const AppContainer = createAppContainer(createSwitchNavigator(
  {
    VerifyActiveUser,
    ActProgramadas: MainDrawer,
    Login,
    SyncData
  },
  {
    initialRouteName: 'VerifyActiveUser',
  }
));

export default class StackNavigator extends Component{
  render(){
      return <AppContainer 
      />;
  }
}

這是我的抽屜堆棧（MainDrawer）。 MenuDrawer是我的自定義抽屜，從那里我想用一個“出門”按鈕轉到登錄屏幕（從Switch Navigator）來結束我的用戶會話，但是我不知道如何將導航道具發送到抽屜的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將swith的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 {
  async componentDidMount() {
      await AsyncStorage.clear();
      this.props.navigation.navigate('Login');
  }

  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle='default' />
      </View>
    );
  }
}