React-Navigation----There is no

作者: _海角_ | 来源:发表于2018-03-21 18:24 被阅读195次

问题描述
const PopStack = StackNavigator({
Pop1: { screen: Pop1Screen },
Pop2: { screen: Pop2Screen },
Pop3: { screen: Pop3Screen }
}, {
mode: "modal"
});

const TabBarViewController = TabNavigator({
MainStack: { screen: MainStack },
AddStack: { screen: PopStack }
})
常见应用场景,登录注册 PopStack页面是pop出来的,Pop3Screen完成登录,需要返回到TabBarViewController时候,
解决思路1
首先从TabBarViewController栈在进入PopStack栈的第一个Pop1Screen时候记录下route 的key 然后使用goback(key)返回到TabBarViewController栈 ,事实上经测试,没有任何反应

goback(key)

解决思路2

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

首先清空掉所有的路由,但是只能回到 PopStack栈的顶层,当尝试回到TabBarViewController栈即会出现
There is no route defined for key xxx. Must be one of: 'AAA','BBB','CCC' 即xxx不在PopStack栈
github上解决方法:

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
export default function DismissableStackNavigator(routes, options) {
    const StackNav = StackNavigator(routes, options);

    return class DismissableStackNav extends Component {
        static router = StackNav.router;

        render() {
            const { state, goBack } = this.props.navigation;
            const props = {
                ...this.props.screenProps,
                dismiss: () => goBack(state.key),
            };
            return (
                <StackNav
                    screenProps={props}
                    navigation={this.props.navigation}
                />
            );
        }
    }
};

然后修改PopStack

const PopStack = DismissableStackNavigator({
  Pop1: { screen: Pop1Screen },
  Pop2: { screen: Pop2Screen },
  Pop3: { screen: Pop3Screen }
}, {
  mode: "modal"
});

在需要TabBarViewController栈的时候调用

this.props.screenProps.dismiss()

经调试,发现dismiss: () => goBack(state.key),中的key为PopStack 的key 为AddStack 的key,故而可以通过goBack(state.key)返回到TabBarViewController栈,但为何可以记录到AddStack的key
但恕我愚钝,不了解其中原理,还望看到文章的大神指导。

感谢
How to dismiss modal containing a StackNavigator

相关文章

网友评论

  • 呆呆笨:请教一下
    const PopStack = DismissableStackNavigator({
    Pop1: { screen: Pop1Screen },
    Pop2: { screen: Pop2Screen },
    Pop3: { screen: Pop3Screen }
    }, {
    mode: "modal"
    });

    这里面的Pop1、Pop2、Pop3是随便定义的吗
    _海角_:@呆呆笨 push 的时候,this.props.navigation.navigate('Pop1'),screen: 后面跟的是页面export出来的组件
    呆呆笨:@_海角_ 那要怎么使用呢 我现在刚学 弄得好乱
    _海角_:@呆呆笨 是的
  • Skyling:我也遇到这个问题,也没想到合适办法直接登录完成后回到tabbar子路由
  • Redman:最近也遇到一样的问题了, 只不过在你的思路2里面加一个 key: null 就解决问题, 虽然我也不知道为什么
    reset(navigation, routeName) { const resetAction = NavigationActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName })] }); navigation.dispatch(resetAction);key:null }; this.reset(this.props.navigation, 'TabBarViewController');
    Skyling:你这个格式有问题吧 ?大佬
    const resetAction = NavigationActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName })],
    key:null
    });
    navigation.dispatch(resetAction); 还是报There is no route defined for key xxx

本文标题:React-Navigation----There is no

本文链接:https://www.haomeiwen.com/subject/xmngqftx.html