React-Native 如何清除内部导航堆栈？

Question

我是 react-native 的新手，正在开发一个具有底部选项卡 navigation.For 实现此功能的应用程序，我使用了 react-navigation-material-bottom -tabs ，运行良好 fine.Like 我有 3 个屏幕，在主页的底部选项卡 navigator.But 中说主页、个人资料和关于屏幕我有多个屏幕流 implemented.For 我使用 Stack Navigator ，它也工作正常。所以我的应用程序流程就像 Home-> Screen1-> Screen2-> Screen3 我面临的问题是，假设我在 Screen3 上，然后我从底部导航切换到 Profile 屏幕，然后再次切换到 Home 屏幕，

I should be able to see Home Screen there but currently it shows Screen3

这是我left.What应该做的？以下是我的代码

App.js（包含底部导航）

export default BottomTabNavigator = createMaterialBottomTabNavigator(
{
Home: {
  screen: HomeRoutes,
  },
},
Profile: {
  screen: ProfileScreen,
},
About: {
  screen: AboutScreen,
 },
},
{
initialRouteName: 'Home',
},
);

HomeRoutes.js

export default createStackNavigator(
{
  Home:{
     screen: Home,
   },
  Screen1: {
     screen: Screen1,
   },
Screen2: {
    screen: Screen2,
  },
Screen3: {
  screen: Screen3,
   },
},
{
  initialRouteName: 'Home',
},
);

或者也许我可以做这样的事情，当我从主屏幕导航到屏幕 1 时，底部的标签导航没有显示给用户？

Answer 1

BottomTabNavigator和StackNavigator的网名不能相同

您可以像下面这样更改此代码。

export default createStackNavigator(
  {
    CHome:{
      screen: Home,
    },
    Screen1: {
      screen: Screen1,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
  },
  {
    initialRouteName: 'CHome',
  },
);

Answer 2

问题

你的代码没问题，当你从 Home -> Screen 3 导航到 Profile 时，导航堆栈有 Screen 3 的历史是堆栈上的最后一条路线，所以当你回到 Home 时它会显示你是屏幕 3 而不是屏幕 1。

解决方案

一个简单的方法是在调用 this.props.navigation.navigate('Profile') 之前清除堆叠的路由，如下所示：

import { StackActions, NavigationActions } from 'react-navigation';

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

注意： 我不确定您使用的 react-navigation 是哪个版本，因此请查看文档 here 以了解正确的版本和正确的用法，但是这应该会让您知道如何去做。

希望对您有所帮助！

Answer 3

我想你想在再次按下主页选项卡时再次看到主屏幕。然后再按主页选项卡时，通过比较当前屏幕上的值可以解决问题。

`HomeRoute`

中的最后一个屏幕

import { StackActions } from 'react-navigation';
...
let chk = false
...
 componentDidUpdate(){
    if (!chk){
      chk = true // Change value when rendering screen
    } else {
      //The popToTop action takes you back to the first screen in the stack, dismissing all the others.
      this.props.navigation.dispatch(StackActions.popToTop()); 
      chk = false //Initialization
    }
  }

React-Native 如何清除内部导航堆栈？

React-Native how to clear inner navigation stack?

reactjs

react-native

react-native-android

stack-navigator

问题

解决方案

`HomeRoute`