[英]onPress not working on Animatable component
Is anything jumping out as wrong here?这里有什么错误吗? I am trying to have an
onPress
behavior on my Animatable component so when i drag it around with a gesture it will move, but if i click it it will fire that onPress behavior ...我试图在我的 Animatable 组件上有一个
onPress
行为,所以当我用手势拖动它时,它会移动,但如果我点击它,它将触发 onPress 行为......
It's currently a TouchableOpacity
because that is what another stackoverflow answer suggested, yet when I use the createAnimatedComponent
function with a TouchableOpacity
I lose the ability to actually move it with gestures.这是目前一个
TouchableOpacity
因为那是另一个计算器回答表明,但当我用createAnimatedComponent
功能与TouchableOpacity
我失去了实际用手势移动的能力。
Any ideas?有任何想法吗?
return (
<AnimatedTouchable
style={[
styles.card,
this.state.active ? { zIndex: 2 } : { zIndex: 1 },
{
transform: [
{ translateX: this._animatedValue.x },
{ translateY: this._animatedValue.y },
{ rotate: interpolatedRotation },
{ scaleX: this.scale },
{ scaleY: this.scale }
]
}
]}
onPress={this.sayHi}
{...this._panResponder.panHandlers}
>
<Text style={styles.cardNumber}>{this.props.id}</Text>
</AnimatedTouchable>
);
const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
With this current setup it only fires the onPress function, but non of my gesture animations go through.使用当前的设置,它只触发 onPress 函数,但我的手势动画没有通过。
Animated
does not support it. Animated
不支持它。 It may not cause errors, but functions may not work properly.它可能不会导致错误,但功能可能无法正常工作。
createAnimatedComponent()
can be used to make a component animatable. createAnimatedComponent()
可用于使组件具有动画效果。
Animated
exports the following animatable components using the above wrapper: Animated
使用上述包装器导出以下可动画组件: You can change this你可以改变这个
<Animated.View>
<TouchableOpacity>
<Text style={styles.cardNumber}>{this.props.id}</Text>
</TouchableOpacity>
</Animated.View>`
You can wrap your component with an AnimatableView
and use a ref in order to execute the animation, example:您可以使用
AnimatableView
包装您的组件并使用 ref 来执行动画,例如:
import React, { useRef } from 'react'
import {
View as AnimatableView,
initializeRegistryWithDefinitions
} from 'react-native-animatable'
import { throttle } from 'lodash'
import { ANIMATIONS } from '../animations'
export default function (WrappedComponent) {
return ({ onPress, delay = 800, duration = 1000, animation = ANIMATIONS.ZOOM_IN_OUT, ...rest }) => {
const compEl = useRef(null)
const onPressAnimatedDelayed = throttle((event) => {
onPress && onPress(event)
compEl.current.animate(animation, duration)
}, delay, { 'trailing': false })
return (
<AnimatableView ref={compEl}>
<WrappedComponent
onPress={onPressAnimatedDelayed}
{...rest}
/>
</AnimatableView>
)
}
}
Check the example running from Expo: https://snack.expo.io/@jdnichollsc/animatable检查从 Expo 运行的示例: https : //snack.expo.io/@jdnichollsc/animatable
Regards问候
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.