React Native中Animated嵌套Pressable真机点击无响应问题求助

我给Card组件应用了Animated.View，CardMain组件使用ScrollView，子组件ModeContainer使用Pressable，触发onPress时执行changemodefunc函数。模拟器中点击ModeContainer时，onPress与changemodefunc均能正常运行，但连接真机运行时，点击ModeContainer无响应。使用Windows系统及模拟器，相关代码如下：

import {
    Animated,
    View,
    ScrollView, 
} from 'react-native';    
    
import LinearGradient from 'react-native-linear-gradient';


const Container = styled(LinearGradient)`
flex: 1;
justify-content: center;
align-items: center;
`;


const SecondContainer = styled.View`
flex: 9.1;
`;


const Card = styled(Animated.createAnimatedComponent(View))`
flex: 1;
`;


const CardWapper = styled(LinearGradient)`
flex: 1;
`;

const CardMain = styled(ScrollView)`
flex: 9;
`;


const ModeWrapper = styled.View`
flex:1;
`;

const ModeContainer = styled.Pressable`
`;


const IconCon = styled.Pressable`
width: 50px;
`;

<Container>
    <SecondContainer>
        <Card
            style={{
                transform: [...POSITION.getTranslateTransform()],
            }}
        >
            <CardWapper>
                <CardMain>
                    <ModeWrapper>
                        <ModeContainer
                            onPress={() => changemodefunc('black')}>
                            <IconCon>
                            </IconCon>
                        </ModeContainer>
                    </ModeWrapper>
                </CardMain>
            </CardWapper>
        </Card>
    </SecondContainer>
</Container>

解决方案 #

• 修复Pressable的点击区域：当前ModeContainer没有设置任何尺寸样式，真机上可能没有可点击的区域。给它添加明确的宽高或padding，确保点击范围可见：

  const ModeContainer = styled.Pressable`
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
  `;
  

• 解决ScrollView的触摸拦截：ScrollView可能会优先捕获触摸事件，导致子Pressable无法响应。可以根据需求调整：

  • 如果不需要滚动，给ScrollView添加scrollEnabled={false}：

    <CardMain scrollEnabled={false}>
    

  • 如果需要保留滚动，给Pressable添加hitSlop扩大点击区域：

    <ModeContainer
        onPress={() => changemodefunc('black')}
        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
    

• 处理Animated组件的触摸传递：Animated.View可能存在触摸事件穿透问题，给Card组件添加pointerEvents="box-none"确保下层组件能接收触摸：

  <Card
      style={{ transform: [...POSITION.getTranslateTransform()] }}
      pointerEvents="box-none"
  >
  

• 检查LinearGradient的触摸拦截：CardWapper作为背景渐变层，可能会拦截触摸事件。如果它仅作为背景，添加pointer-events: none，同时给内部需要响应触摸的组件设置pointer-events: auto：

  const CardWapper = styled(LinearGradient)`
    flex: 1;
    pointer-events: none;
  `;
  
  const ModeContainer = styled.Pressable`
    pointer-events: auto;
    /* 其他样式 */
  `;
  

• 验证函数本身的可用性：在changemodefunc开头添加console.log，通过真机调试工具查看日志，确认函数是否被触发。如果没触发，说明触摸事件没传递到组件；如果触发了，检查函数内部逻辑在真机上的兼容性。

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