应用变换动画时，TouchableOpacity 不起作用答案

【问题标题】：TouchableOpacity is not working when Transform Animation is applied应用变换动画时，TouchableOpacity 不起作用
【发布时间】：2020-10-18 07:20:50
【问题描述】：

下面的代码是用TransformAnimation渲染一个Touchable按钮。

    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, headerScrollDistance],
        outputRange: [0, -11],
        extrapolate: 'clamp',
    });

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

    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 应用于 Touchable 按钮。未应用变换动画时，按钮按预期工作。但是在应用动画时不起作用。如果页面恢复正常状态（即向后滚动），则按钮按预期工作。

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

【问题讨论】：

标签： react-native animation transform touchableopacity

【解决方案1】：

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

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

2- 更改包含 TouchableOpacity 的 Animated.View 的高度（到 TouchableOpacity 的合适大小）

3- 通过在 TouchableOpacity 中移动

看起来Touchableopacity not working inside Animated.View 上有公开讨论

【讨论】：