应用变换动画时,TouchableOpacity不起作用

问题描述

下面的代码是使用Touchable Transform渲染一个Animation按钮。

    const { scrollY,headerScrolldistance } = this.state;
    const profileImageTranslateX = scrollY.interpolate({
        inputRange: [0,headerScrolldistance],outputRange: [0,-(ScreenWidth  /2) + 32],extrapolate: 'clamp',});

    const profileImageTranslateY = scrollY.interpolate({
        inputRange: [0,-11],});

    const profileImageScale = scrollY.interpolate({
        inputRange: [0,headerScrolldistance / 2,outputRange: [1,0.8,0.6],});

    return (
        <Animated.View
            style={[
                Styles.animatedView.profileStyle,{
                    transform: [
                        { translateX: profileImageTranslateX },{ translateY: profileImageTranslateY },{ scale: profileImageScale }
                    ]
                }
            ]}
        >
            <TouchableOpacity activeOpacity={0.5} onPress={() => this.props.history.push('./profilePhotochanger')}>
                <ImageComp profileImageUrl={profileimageurl} imageStyle={Styles.homePageImageStyle} />
            </TouchableOpacity>
        </Animated.View>
    );

随着页面滚动,Animation应用于可触摸按钮。不应用变换动画时,按钮将按预期工作。但是在应用动画时不起作用。如果页面返回到正常状态(即向后滚动),则按钮将按预期工作。

应用动画后react-native TouchableOpacity's不起作用是onPress的正常行为吗?还是我的代码有问题?

解决方法

如果它适合您,您可以尝试以下选项之一

1-从“ react-native-gesture-handler”导入{TouchableOpacity};

2-更改包含TouchableOpacity的Animated.View的高度(以 适合TouchableOpacity的大小)

3-通过在TouchableOpacity内部移动

好像在Touchableopacity not working inside Animated.View

上有公开讨论