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

Question

我想使用 React 导航的后退操作来关闭模态，如下所示：

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

正在尝试使用自定义操作的另一种方法，如下所示。当我重新加载应用程序并尝试它时，它第一次正常工作。但是，当我第二次尝试而不重新加载应用程序时，我收到错误消息：无法读取未定义的属性 'routes'。

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

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

Answer 2

在这里找到了解决方案：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'});

然后在我的签到屏幕中：

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();

    });
}

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

React navigation - Navigation action = back

react-native

react-navigation