时间戳

首页 > 解决方案 > 如何在反应导航中从抽屉堆栈导航到开关堆栈？

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

问题描述

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

这是我的 switch Navigator（我的登录名）。

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 将 navigation.navigate('Login') 道具从开关发送到我的自定义抽屉吗？

标签： javascriptreact-nativereact-reduxreact-navigation

解决方案

您可以在抽屉中添加注销屏幕。屏幕是一个 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>
    );
  }
}

推荐阅读