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

时间:2019-07-29 20:56:50

标签: javascript react-native react-redux react-navigation

我正在使用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:< / p>

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')道具发送到我的自定义抽屉吗?

1 个答案:

答案 0 :(得分:2)

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