React Native模态框按设备返回键不显示Alert的问题求助

问题根源 #

在Android平台，当Modal处于可见状态时，按下设备返回键会优先触发Modal的onRequestClose回调，而非全局的hardwareBackPress事件监听器，这就是你的自定义Alert逻辑无法执行的核心原因。

修改后的完整代码 #

import {
  View,
  Text,
  Modal,
  StyleSheet,
  Button,
  Alert,
  BackHandler,
  TouchableOpacity,
} from 'react-native';
import React, {useState, useEffect} from 'react';

const Lab3_3 = () => {
  const [modalVisible, setModalVisible] = useState(false);

  useEffect(() => {
    const handleBackPress = () => {
      if (modalVisible) {
        showCloseAlert();
        return true;
      }
      return false;
    };

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      handleBackPress,
    );

    return () => backHandler.remove();
  }, [modalVisible]);

  const showCloseAlert = () => {
    Alert.alert(
      'Alert',
      'You have turned off the modal using the device\'s back button',
      [{text: 'OK', onPress: () => setModalVisible(false)}],
      {cancelable: false}
    );
  };

  return (
    <View style={{flex: 1}}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={showCloseAlert}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text>Hello world!</Text>
            <Button title="Close Modal" onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>

      <TouchableOpacity
        style={styles.customButton}
        onPress={() => setModalVisible(true)}>
        <Text style={styles.buttonText}>Open Modal</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  customButton: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    padding: 10,
    backgroundColor: 'green',
    borderRadius: 5,
  },
  centeredView: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 20,
    alignItems: 'center',
    elevation: 5,
  },
});

export default Lab3_3;

关键修改点 #

• 核心修复：将Modal的onRequestClose替换为自定义的showCloseAlert函数，确保Android平台按下返回键时直接触发Alert提示。
• 逻辑复用：把Alert提取为独立函数，同时供BackHandler和onRequestClose调用，保证多场景下逻辑一致。
• 体验优化：给Alert添加cancelable: false，避免用户点击空白处关闭Alert但遗留Modal状态。
• 布局修复：给根View添加flex:1，确保按钮占满整个屏幕（原代码可能导致布局显示异常）。

内容的提问来源于stack exchange，提问作者ɭê ɦùռɠ