Question

我已经实现了https://reactnavigation.org/docs/en/auth-flow.html，如SwitchNavigator所述。但是，当我导航到AuthScreen时，我的App不会被卸载。

我正在使用一个SwitchNavigator，其中有一个屏幕和一个DrawerNavigator，以及一些StackNavigator。我已经尝试过更改导航器的结构，但这似乎没有任何效果。

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;

如果您导航到其他堆栈/抽屉中的屏幕，如何强制在SwitchNavigator中的Auth屏幕上被卸载？

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;

您可以try it here。当您单击登录按钮时，您会在控制台中看到AuthScreen已卸载。

SwitchNavigator屏幕永远不会卸载

1 个答案: