React Native中切换屏幕时自动关闭Alert对话框的实现方案

得先说清楚，React Native 自带的Alert组件本身没有内置的“屏幕切换自动关闭”机制——因为它是挂载在原生系统层级，而非RN的导航栈之上的。不过不用原生监听也能实现，给你几个纯RN层面的方案：

1. 结合导航生命周期钩子（React Navigation） #

如果你用的是React Navigation，可以利用useBlurEffect（屏幕失焦时触发）来处理Alert关闭逻辑。不过RN的Alert没有直接的关闭API，所以得自己封装一个可控制的Alert：

import { Alert, useState, useCallback } from 'react-native';
import { useBlurEffect } from '@react-navigation/native';

const useControllableAlert = () => {
  const [cancelCallback, setCancelCallback] = useState(null);

  const showAlert = (title, message, buttons, options) => {
    // 保存取消按钮的回调
    const cancelBtn = buttons.find(btn => btn.style === 'cancel');
    setCancelCallback(cancelBtn?.onPress || (() => {}));
    
    Alert.alert(
      title,
      message,
      buttons.map(btn => ({
        ...btn,
        onPress: () => {
          btn.onPress?.();
          setCancelCallback(null);
        }
      })),
      options
    );
  };

  // 屏幕失焦时，触发取消回调关闭Alert
  useBlurEffect(
    useCallback(() => {
      cancelCallback?.();
      setCancelCallback(null);
    }, [cancelCallback])
  );

  return { showAlert };
};

// 用法示例
const MyScreen = () => {
  const { showAlert } = useControllableAlert();

  const handleOpenAlert = () => {
    showAlert(
      '确认操作',
      '你确定要执行这个操作吗？',
      [
        {
          text: '取消',
          style: 'cancel',
          onPress: () => console.log('取消操作')
        },
        {
          text: '确定',
          onPress: () => console.log('执行操作')
        }
      ],
      { cancelable: false }
    );
  };

  return <Button title="打开Alert" onPress={handleOpenAlert} />;
};

这个方案的核心是，在屏幕切换（失焦）时，调用Alert取消按钮的回调，间接关闭Alert。

2. 全局状态+导航监听 #

用Context或者Redux维护一个全局状态，比如shouldDismissAlerts：

• 当登出触发屏幕切换时，把这个状态设为true；
• 自定义的Alert组件监听这个状态变化，一旦为true就执行取消逻辑，然后重置状态。

示例（用Context）：

// AlertContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import { Alert } from 'react-native';

const AlertContext = createContext();

export const AlertProvider = ({ children }) => {
  const [shouldDismiss, setShouldDismiss] = useState(false);
  const [currentCancelCallback, setCurrentCancelCallback] = useState(null);

  const showAlert = (config) => {
    const cancelBtn = config.buttons.find(btn => btn.style === 'cancel');
    setCurrentCancelCallback(cancelBtn?.onPress || (() => {}));
    
    Alert.alert(
      config.title,
      config.message,
      config.buttons.map(btn => ({
        ...btn,
        onPress: () => {
          btn.onPress?.();
          setCurrentCancelCallback(null);
        }
      })),
      config.options
    );
  };

  // 监听全局状态，触发关闭
  useEffect(() => {
    if (shouldDismiss) {
      currentCancelCallback?.();
      setCurrentCancelCallback(null);
      setShouldDismiss(false);
    }
  }, [shouldDismiss, currentCancelCallback]);

  return (
    <AlertContext.Provider value={{ showAlert, setShouldDismiss }}>
      {children}
    </AlertContext.Provider>
  );
};

export const useAlert = () => useContext(AlertContext);

然后在登出逻辑里调用setShouldDismiss(true)，就能触发所有Alert关闭。

3. 屏幕卸载时手动触发取消 #

如果你的Alert是某个屏幕独有的，可以在屏幕卸载的useEffect清理函数里，调用取消按钮的回调：

import { useEffect, useState } from 'react';
import { Alert, Button } from 'react-native';

const MyScreen = () => {
  let cancelAlert = null;

  const openAlert = () => {
    cancelAlert = () => {
      console.log('Alert被关闭');
    };

    Alert.alert(
      '提示',
      '这是一个测试Alert',
      [
        { text: '取消', style: 'cancel', onPress: cancelAlert },
        { text: '确定', onPress: () => console.log('确定') }
      ],
      { cancelable: false }
    );
  };

  useEffect(() => {
    return () => {
      // 屏幕卸载时关闭Alert
      cancelAlert?.();
    };
  }, []);

  return <Button title="打开Alert" onPress={openAlert} />;
};

注意事项 #

React Native的Alert是原生组件，没有暴露直接关闭的API，所以所有纯RN方案本质上都是通过“模拟用户点击取消按钮”来实现关闭。如果要追求最稳定的效果，结合原生事件监听会更可靠，但上面的方案已经能解决大部分场景的问题。

内容的提问来源于stack exchange，提问作者Happy