如何将 React Native 应用程序导航重置为 React Navigation 的当前屏幕

Posted 2023-04-13

【中文标题】如何将 React Native 应用程序导航重置为 React Navigation 的当前屏幕

【英文标题】：how can i reset the React Native app navigation to current screen of React Navigation

【发布时间】：2018-01-12 23:08:22

【问题描述】：

我正在尝试构建我的第一个 React Native 应用程序，但遇到了导航问题。 我的应用在 Stack Navigator 中有三个屏幕

Home 
Login 
User (User screen again is a Tab Navigator with three screens UserProfile, UserHome, UserSettings) 

我的导航器

const Navigator = StackNavigator(
  
   Home: 
      screen: HomeScreen
    ,
    Login: 
      screen: LoginScreen,
    ,
   User: 
      screen: UserTabNavigator,
    
  ,
    initialRouteName: 'Home'
  ,
  
    navigationOptions: () => (
      headerTitleStyle: 
        fontWeight: 'normal',
      ,
    ),
  
);

初始路径是主页，因此应用程序在主屏幕中打开，从那里点击登录进入登录屏幕

现在在我的登录组件中，成功验证后我将重定向到用户屏幕。

当我进入用户界面时，我看到一个后退按钮，点击它会带我回到登录界面

我想在身份验证成功时重置导航堆栈并将用户屏幕设置为根，所以在登录功能中我添加了

const resetAction = NavigationActions.reset(
    index: 0,
    actions: [
        NavigationActions.navigate( routeName: 'User' )
    ]
);
this.props.navigation.dispatch(resetAction);

这很有效，因为我现在看不到返回按钮，但登录后我看到一个奇怪的向后滑动动画，我短暂地看到主屏幕，然后重定向到用户屏幕

我做错了什么？

【问题讨论】：

你可以参考这个***.com/questions/43090884/…

【参考方案1】：

您可以进行正常导航并禁用左侧标题（或使用您需要的任何内容进行更改）然后您可以gesturesEnabled: false 所以在 ios 上它不允许通过滑动返回...这不是最好的方法它（它很容易成为最糟糕的方式，因为你的堆栈实际上并没有重置，所以你的索引可能会搞砸）但我认为这是最快的解决方法

---

编辑：正如我目前看到的，他们已经修复了那个奇怪的动画，所以使用正常重置应该可以正常工作（日期 2018 年 3 月 26 日）