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

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

尝试使用以下自定义操作的另一种方法。当我重新加载应用程序并尝试它时，它第一次正常工作。但是当我第二次尝试而不重新加载应用程序时，我得到了错误：无法读取未定义的属性“路由”。

在我的 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

来自github上的richardfickling。

在我的 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()