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

通过基于屏幕的功能（您要进入哪个屏幕来声明navigation_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} />

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

2 个答案: