react-native - 背面的确认/警告对话框

Question

就像在 Web 浏览器中一样，我们有 onBeforeUnload (vs onUnload) 来显示警报或一些警告“有未保存的数据 - 您确定要返回吗”。

我正在尝试做同样的事情。我在 react-navigation 的文档中找不到任何内容。

我想做一些像这样真正hacky的事情，但我不知道它是否正确:

import React, { Component } from 'react'
import { StackNavigator } from 'react-navigation'


export default function ConfirmBackStackNavigator(routes, options) {
    const StackNav = StackNavigator(routes, options);

    return class ConfirmBackStackNavigatorComponent extends Component {
        static router = StackNav.router;

        render() {
            const { state, goBack } = this.props.navigation;

            const nav = {
                ...this.props.navigation,
                goBack: () => {
                    showConfirmDialog()
                    .then(didConfirm => didConfirm && goBack(state.key))
                }
            };
            return ( <StackNav navigation = {nav} /> );
        }
    }
}

Answer 1

React navigation 5.7 添加了对它的支持:

function EditText({ navigation }) {
  const [text, setText] = React.useState('');
  const hasUnsavedChanges = Boolean(text);

  React.useEffect(
    () =>
      navigation.addListener('beforeRemove', (e) => {
        if (!hasUnsavedChanges) {
          // If we don't have unsaved changes, then we don't need to do anything
          return;
        }

        // Prevent default behavior of leaving the screen
        e.preventDefault();

        // Prompt the user before leaving the screen
        Alert.alert(
          'Discard changes?',
          'You have unsaved changes. Are you sure to discard them and leave the screen?',
          [
            { text: "Don't leave", style: 'cancel', onPress: () => {} },
            {
              text: 'Discard',
              style: 'destructive',
              // If the user confirmed, then we dispatch the action we blocked earlier
              // This will continue the action that had triggered the removal of the screen
              onPress: () => navigation.dispatch(e.data.action),
            },
          ]
        );
      }),
    [navigation, hasUnsavedChanges]
  );

  return (
    <TextInput
      value={text}
      placeholder="Type something…"
      onChangeText={setText}
    />
  );
}

文件: https://reactnavigation.org/docs/preventing-going-back