Pressable 在嵌套视图中不起作用——反应原生答案

【问题标题】：Pressable not working inside nested View -- React nativePressable 在嵌套视图中不起作用——反应原生
【发布时间】：2021-10-16 07:54:30
【问题描述】：

我在嵌套视图中的图像下方使用可按压对象，在父容器视图内部具有背景颜色，但是，onPress 没有响应，除非我定位可按压绝对对象（这迫使我重新定位其他组件）或当我从子视图中删除 backgroundColor ，或者如果将可按下的移动到子视图之外可以正常工作。什么可能是它无法在具有显式背景颜色而不是默认值的视图中工作的根本原因。我觉得事件冒泡可能存在问题，例如视图的背景颜色与可按下的重叠。非常感谢专家建议和/或修复。 仅在安卓上测试。谢谢

import React from 'react'
import {View, Text, Image,Pressable } from 'react-native';

const SignUp3Success = ({navigation}) => {
    return (

        <View style={{flex:1, justifyContent:'center', alignItems:'center', }}>
            
            <View style={{width:332, height:235, bottom:56 }}>
                <Image source={require('MyProjectName/src/images/binaryGlobe.png')}
                    style={{width:'100%', height:'100%',}} 
                    resizeMode='contain'  
                />
                <Text style={{fontSize:24, top:'5%'}}>Welcome!</Text>
                <Text style={{fontSize:16, top:'8%'}}>Your account has been created.</Text>

                <Pressable  style={
                                    ({pressed}) => 
                                        [{ 
                                            borderRadius:10, 
                                            alignItems: 'center', 
                                            justifyContent: 'center',
                                            height:42,
                                            width:'90%',
                                            alignSelf:'center',
                                            backgroundColor: pressed ? 'blue': 'green',
                                            elevation:3,
                                            top:'18%'
                                        }]
                                }
                                onPress={() => {alert('Hi you pressed me')}}
                            >
                    <Text style={{color:'white', fontSize:16, fontWeight:'bold'}}>Add a photo</Text>           
                </Pressable>      
            </View> 
        </View>      
    );
}
export default SignUp3Success

无背景颜色

带有明确的背景颜色

【问题讨论】：

标签： android ios react-native view pressable

【解决方案1】：

我刚刚使用Snack Expo 快速执行您的代码。您发布的代码对我来说非常好。我尝试更改背景颜色和位置，但它仍然有效。发布的代码是否正是对您不起作用的代码？

【讨论】：

是的，这正是为子视图定义的 backgroundColor 对我不起作用的代码。