Question

我想使用反应导航的后退动作来解除模态，如下所示：

this.props.navigation.dispatch(NavigationActions.back({
    key: this.props.navigation.state.params.previousKey
}));

导航到模态时传递上一屏幕的键：

this.props.navigation.navigate('ModalScreen', {
    previousKey: this.props.navigation.state.key
});

但什么都没发生。

当我不使用密钥时，navigationaction.back会在通过点击按钮调用该功能时将模式正确地解除回原来的屏幕。

但是当我从构造函数中调用它时，它会发送回根屏幕...

有什么想法吗？

编辑1

尝试使用自定义操作的另一种方法，如下所示。当我重新加载应用程序并尝试它时，它第一次正常工作。但是当我第二次尝试没有重新加载应用程序时，我得到错误：无法读取属性＆＃39;路由＆＃39;未定义的。

我的router.js文件中的

：

const CheckInStack = StackNavigator({
    CheckIn: {
        screen: CheckIn,
        navigationOptions: {
            header: null,
            headerLeft: null,
            gesturesEnabled: false,
        }
    }
});

export const SiteStack = StackNavigator({
    Site: {
        screen: Site,
        navigationOptions: {
            header: null,
            headerLeft: null,
            gesturesEnabled: false,
        }
    },
    CheckIn: {screen: CheckInStack,},
}, {mode: 'modal', headerMode: 'none'});

const prevGetCheckInStateForAction = SiteStack.router.getStateForAction;

SiteStack.router = {
    ...SiteStack.router,
    getStateForAction(action, state) {
        if(state && action.type === "DISMISS_MODAL") {

            console.log('in router');

            const routes = state.routes.slice();
            routes.pop();
            return {
                ...state,
                routes,
                index: routes.length -1,
            }
        }
        return prevGetCheckInStateForAction(action, state);
    }
};

我的screen.js文件中的

：

componentDidMount() {

        const {profile} = this.props.auth;

        var channel = pusher.subscribe('private-user.' + profile.id );

        channel.bind('App\\Events\\Order\\SiteHasAnsweredCheckIn', event => {

            // this.props.navigation.dispatch(NavigationActions.back()); => this is where the back actions is launched. nowhere else.

            //CUSTOM ACTION DISPATCH
            this.props.navigation.dispatch({
                type: 'DISMISS_MODAL'
            });

        });
}

Answer 1

在此处找到解决方案：https://github.com/react-community/react-navigation/issues/686

来自richardfickling on github。

在我的router.js中，我创建了一个DismissableStackNavigator，如下所示：

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 nav = {
        ...this.props.navigation,
        dismiss: () => goBack(state.key),
      };
      return (
        <StackNav
          navigation={nav}
        />
      );
    }
  }
};

然后我的签到堆栈如下：

const CheckInStack = DismissableStackNavigator({
    CheckIn: {
        screen: CheckIn,
        navigationOptions: {
            header: null,
            headerLeft: null,
            gesturesEnabled: false,
        }
    }
});
export const SiteStack = StackNavigator({
    Site: {
        screen: Site,
        navigationOptions: {
            header: null,
            headerLeft: null,
            gesturesEnabled: false,
        }
    },
    CheckIn: {screen: CheckInStack,},
}, {mode: 'modal', headerMode: 'none'});

然后在我的CheckIn屏幕中：

componentDidMount() {

    const {profile} = this.props.auth;

    var channel = pusher.subscribe('private-user.' + profile.id );

    channel.bind('App\\Events\\Order\\SiteHasAnsweredCheckIn', event => {

        //method coming from the Dismissable Navigator stack
        this.props.navigation.dismiss();

    });
}

Answer 2

我不知道它是否能解决您的问题，但您可以尝试使用goBack方法而不是调度后退操作。像这样： this.props.navigation.goBack()

反应导航 - 导航动作=返回

2 个答案: