微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决应用变换动画时,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

上有公开讨论

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。