如何在嵌套屏幕之间导航并防止返回React Navigation？

Question

我想要的应用程序结构是首先会有一个SplashScreen，然后转到LandingScreen。从那里用户注册或登录，然后他去HomeScreen。从那里他可以去许多其他屏幕并回到家里。

当用户在LandingScreen时，他不应该回到SplashScreen。当用户在HomeScreen时，他不应该回到LandingScreen或auth的任何屏幕。

• 我的导航器方案对于这种类型的应用程序是否正确？
• 如何从LoginScreen导航到HomeScreen？
• 如何防止用户如上所述返回？我为此试过了navigation.replace。

这是我的导航器：

const MainNavigator = createStackNavigator({
  splash: { screen: SplashScreen },
  auth: {
    screen: createStackNavigator({
      landing: { screen: LandingScreen },
      login: { screen: LoginScreen },
      register: { screen: RegisterScreen }
    })
  },
  main: {
    screen: createStackNavigator({
      home: { screen: HomeScreen },
      details: { screen: DetailsScreen },
      video: { screen: VideoScreen },
      search: { screen: SearchScreen }
    })
  }
},
{
  headerMode: 'none',
  initialRouteName: 'splash',
  cardStyle: { backgroundColor: '#FFFFFF' },
});

Answer 1

使用带有switchNavigator的两个stackNavigators

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
const Auth = createStackNavigator(landing: { screen: LandingScreen },
                                  login: { screen: LoginScreen },
                                  register: { screen: RegisterScreen });
const main = createStackNavigator(home: { screen: HomeScreen },
                                  details: { screen: DetailsScreen },
                                  video: { screen: VideoScreen },
                                  search: { screen: SearchScreen });

export default createSwitchNavigator(
    {
    splash: SplashScreen,
    Auth,
    main,
    },
{
initialRouteName: 'splash',
}
);

SwitchNavigator的目的是一次只显示一个屏幕。默认情况下，它不处理后退操作，并在您切换时将路由重置为其默认状态。

Answer 2

通过基于屏幕的功能（你要去哪个屏幕声明navigate_screen_name）：

function_name = () => {
 this.props.navigation.navigate("navigate_screen_name");
 };

功能调用：

<onPress={this.function_name} />

基于历史记录的功能（进入上一屏幕）：

func_name = () => {
 this.props.navigation.pop();
};

功能调用：

<onPress={this.func_name} />