使用 React Native Alert 确认/阻止返回按钮导航

Question

我试图通过执行类似于this question 的操作来提示用户在使用堆栈导航器的后退按钮之前进行确认，但结果我的结果似乎有所不同。

const defaultGetStateForAction = SignedIn.router.getStateForAction;

const asyncGetUserConfirmation = () => {
	return new Promise((resolve, reject) => {
		Alert.alert(
			"Discard changes?",
			"Your post will be lost if you confirm.",
			[
				{
					text: "No, continue editing",
					onPress: () => {
						resolve(false);
					}
				},
				{
					text: "Yes, discard changes",
					style: "cancel",
					onPress: () => {
						store.dispatch(setPost({}));
						resolve(true);
					}
				}
			],
			{ cancelable: false }
		);
	});
};


SignedIn.router.getStateForAction = (action, state) => {
  if (
    state &&
    action.type === NavigationActions.BACK &&
    Object.keys(store.getState().post).length
  ) {
    asyncGetUserConfirmation().then(continueAction => {
      console.log(continueAction);
      return continueAction ? defaultGetStateForAction(action, state) : null;
    });
  } else {
    return defaultGetStateForAction(action, state);
  }
};

当用户触摸返回按钮时，SignedIn.router.getStateForAction 中的 if 正常工作（如果帖子为空，则不会询问任何问题，否则会弹出警报）。

如果continueAction 为真（在sn-p 的末尾），我希望用户会被重定向回来，但是在用户与警报交互后，控制台上会显示正确的结果，但不管@987654326 @ 为真或假，用户不会被导航回来。

其他一切都按预期工作，那么什么会使return continueAction ? defaultGetStateForAction(action, state) : null; 被“忽略”，甚至不会引发错误？

Answer 1

要在使用堆栈导航器的后退按钮之前显示确认，您可以覆盖堆栈导航器的 onPress。

import React from "react";
import { View, Text, Alert } from "react-native";
import { HeaderBackButton } from "react-navigation";

export default class Detail extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const handleClearPress = navigation.getParam("handleBackPress", () => {});
    return {
      title: "Details!",
      headerLeft: <HeaderBackButton onPress={handleClearPress} />
    };
  };

  componentDidMount() {
    // set handler method with setParams
    this.props.navigation.setParams({
      handleBackPress: this._handleBackPress.bind(this)
    });
  }

  _handleBackPress() {
    // Works on both iOS and Android
    Alert.alert(
      "Discard changes?",
      "Your post will be lost if you confirm.",
      [
        {
          text: "No, continue editing",
          onPress: () => console.log("No, continue editing")
        },
        {
          text: "Yes, discard changes",
          onPress: () => console.log("Yes, discard changes"),
          style: "cancel"
        }
      ],
      { cancelable: false }
    );
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Detail Screen</Text>
      </View>
    );
  }
}