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

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

react-navigation react-native javascript

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 年前

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

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} />

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前