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