reactjs – 导航到父堆栈的父级

发布时间：2020-12-15 16:21:20 所属栏目：百科来源：网络整理

导读：我有这种情况,我有一个嵌套在另一个StackNavigator中的TabNavigator中的StackNavigator. const TabOneStack = StackNavigator({ ScreenA: { screen: ScreenA },ScreenB: { screen: ScreenB }});const MainTabs = TabNavigator({ TabOne: { screen: TabOneSta

我有这种情况,我有一个嵌套在另一个StackNavigator中的TabNavigator中的StackNavigator.

const TabOneStack = StackNavigator({
  ScreenA: { screen: ScreenA },ScreenB: { screen: ScreenB }
});

const MainTabs = TabNavigator({
  TabOne: { screen: TabOneStack },TabTwo: { screen: TabTwoStack }
});

const Root = StackNavigator({
  HomeScreen: { screen: HomeScreen },MainTabs: { screen: MainTabs }
});

一切正常但我无法弄清楚如何从ScreenA导航到根StackNavigator中的主屏幕.
在HomeScreen之后,用户直接导航到ScreenA.
ScreenA标题中的后退按钮工作正常并将我带回Home但需要一种方法来使用一个按钮将我带回HomeScreen.
不幸的是,this.props.navigation.goBack()不起作用.

我也试过了

const backAction = NavigationActions.reset({
  index: 0,key: null,actions: [
    NavigationActions.navigate({ routeName: 'HomeScreen'})
  ]
});    
this.props.navigation.dispatch(backAction));

但我得到：

没有为关键HomeScreen定义路由.必须是以下之一：’ScreenA’,’ScreenB’.

这样做的正确方法是什么？

解决方法

要从子StackNavigator遍历到父StackNavigator,请执行：

class ScreenA extends Component {
    render() {
        return (<Button onPress={() => {
            this.props.navigation.dispatch({type: 'Navigation/BACK'});
        }} title='ScreenA. back to Home' />);
    }
}

带有’Navigation / BACK’的this.props.navigation.dispatch()与最顶层的后退按钮完全相同.
它与goBack()的不同之处在于应用父子堆栈遍历,而goBack()则不然.

结果：

enter image description here

请注意@Jigar的回答也是正确的,它只是我的简写符号.关键是将null参数传递给goBack().没有它,它将无法运作.

this.props.navigation.goBack(null);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!