Экраны SwitchNavigator никогда не отключаются

Question

Я реализовал https://reactnavigation.org/docs/en/auth-flow.html, как описано в SwitchNavigator.Тем не менее, мой AuthScreen никогда не отключается при переходе к App.

Я использую SwitchNavigator, на котором есть экран и DrawerNavigator, а также некоторые StackNavigators.Я пытался изменить структуру моих навигаторов, но это, похоже, не дает никакого эффекта.

const AppStack = createDrawerNavigator(
  {
    StackA: {
        name: 'someStackNavigator',
        screen: someStackNavigator
    },
  },
  {
    ...
  });

const AppNavigator = createSwitchNavigator(
  {
    App: AppStack,
    Auth: {
      screen: AuthScreen
    }
  },
  {
    initialRouteName: 'App'
  });

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

Как заставить экран Auth в SwitchNavigator быть размонтированным, если вы перейдете кэкран в других стеках / ящиках?

Answer 1

Как это?

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import {
  createSwitchNavigator,
  createStackNavigator,
  createAppContainer,
  createDrawerNavigator,
} from 'react-navigation';

class Screen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Screen</Text>
      </View>
    );
  }
}

class AuthScreen extends Component {
  componentDidMount() {
    console.log('componentDidMount');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Auth Screen</Text>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('App')}>
          <Text>Login</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const SomeStackNavigator = createStackNavigator({
  ScreenA: Screen,
  ScreenB: Screen,
});

const AppStack = createDrawerNavigator({
  StackA: {
    name: 'StackA',
    screen: SomeStackNavigator,
  },
  StackB: {
    name: 'StackB',
    screen: SomeStackNavigator,
  },
});

const AppNavigator = createSwitchNavigator(
  {
    App: AppStack,
    Auth: {
      screen: AuthScreen,
    },
  },
  {
    initialRouteName: 'Auth',
  },
);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

Вы можете попробовать здесь .В консоли видно, что при нажатии кнопки входа в систему AuthScreen отключается.