代码之家 › 专栏 › 技术社区 › khateeb

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

react-navigation react-native javascript

0

khateeb · 技术社区 · 7 年前

SplashScreen ,然后转到 LandingScreen HomeScreen . 从那里,他可以去许多其他屏幕,回到家里。

当用户处于 着陆屏幕 飞溅屏 主屏幕 ,他应该回不去了 auth .

我的导航器方案是否适用于这种类型的应用程序?
LoginScreen 到 ?
如何防止用户按上述方式返回?我试过了 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' },
});

2 回复 | 直到 7 年前

1

mr L 7 年前

使用两个StackNavigator和一个switchNavigator

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的目的是一次只显示一个屏幕。默认情况下,它不处理后退操作,并且在您切换时将路由重置为其默认状态。

2

0

Ragu 7 年前

通过基于屏幕的函数(您要去哪个屏幕声明导航屏幕名称):

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

<onPress={this.function_name} />

通过其基于历史的功能(转到上一屏幕):

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

函数调用:

<onPress={this.func_name} />