React Native开发经验集React-Native 开发阵营React Native开发

React-Navigation----There is no

2018-03-21  本文已影响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

上一篇 下一篇

猜你喜欢

热点阅读