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：< / 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'）道具发送到我的自定义抽屉吗？

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>
    );
  }
}

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

1 个答案: