React Native中Pressable onPress在Android失效但iOS正常问题求助

问题原因分析 #

1. Android层级拦截问题：全屏的backgroundModal图片使用position: absolute，在Android系统中会覆盖在Pressable组件之上，导致点击事件被图片拦截，无法传递到Pressable；iOS的层级计算逻辑不同，因此不受影响。
2. 极端层级值异常：最外层View设置的超大zIndex和elevation值，可能在Android系统中触发层级计算异常，反而导致交互元素无法响应。
3. 布局结构依赖问题：依赖absolute实现全屏覆盖，移除后父容器无足够尺寸支撑，导致背景消失。

解决方案 #

方案1：修复背景图片层级，避免拦截点击

给背景图片添加zIndex: -1，让它处于底层，不再拦截Pressable的点击事件：

// style.js 中修改 backgroundModal 样式
backgroundModal: {
    position: 'absolute', 
    height: '100%', 
    width: '100%',
    zIndex: -1 // 新增：让背景处于底层
},

同时把最外层View的极端层级值改为合理范围：

// modal.js 中修改最外层View样式
<View style={{
    width: '100%', 
    height: '100%', 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    zIndex: 1000, // 改为合理值
    elevation: 10 // 改为合理值
}}>

另外注意修正Pressable中的函数调用（原代码仅引用函数未执行）：

onPress={() => {
    props.closeModalLoading(); // 修正：调用关闭函数
    console.log("onPress works")
}}

方案2：改用React Native自带Modal组件（推荐）

React Native的Modal组件原生支持全屏弹窗，无需手动处理absolute和层级，稳定性更高：

import { Modal } from 'react-native';

// modal.js 重构代码
{props.isModalLoadingVisible && (
    <Modal visible={props.isModalLoadingVisible} transparent={true}>
        <View style={{flex:1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)'}}>
            <View style={styleModalLoading.modalView}>
                <View style={styleModalLoading.logoContainer}>
                    <Image style={styleModalLoading.logo} source={Logo} />
                    <Text style={styleModalLoading.text}>LOADING...</Text>
                </View>
                {props.isBtnCancelVisible && (
                    <Pressable onPress={() => {props.closeModalLoading(); console.log("onPress works")}} style={styleModalLoading.btnCancel}>
                        <Text style={styleModalLoading.btnCancelTxt}>CANCEL</Text>
                    </Pressable>
                )}
            </View>
        </View>
    </Modal>
)}

此方案可直接去掉自定义的backgroundModal图片，用Modal的transparent属性配合背景色实现半透明遮罩，彻底规避层级和点击问题。

方案3：修复非absolute布局的背景问题

若不想使用Modal，移除最外层View的absolute后，给它设置flex:1占满全屏：

// modal.js 修改最外层View样式
<View style={{
    flex:1, // 新增：占满父容器
    zIndex: 1000,
    elevation: 10
}}>
    <Image style={[styleModalLoading.backgroundModal, {position: 'relative'}]} source={backgroundGrayOpacity} />
    {/* 其他内容不变 */}
</View>

同时修改backgroundModal样式，去掉absolute改为flex布局：

// style.js 修改 backgroundModal
backgroundModal: {
    flex:1, // 改为flex占满容器
    width: '100%',
},

这样背景不会消失，Pressable的点击也能正常响应。

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