如何使React Native Animated.View可点击？

Question

我正在使用这个反应原生的火种演示 - > https://github.com/brentvatne/react-native-animated-demo-tinder

是否可以使卡片"可点击",以便在点击时导航到另一个视图？我已经尝试在动画视图周围包装"可触摸"组件,但这样做会禁用动画.

任何想法都将受到高度赞赏,谢谢!

Answer 1

另一种方法(对我来说效果更好)是使用Animated的createAnimatedComponent方法创建AnimatedTouchable组件:

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

<AnimatedTouchable onPress={this.onPress}>
  stuff here
</AnimatedTouchable>

Answer 2

我想你可以在Animated.View中使用TouchableX

<Animated.View>
  <TouchableOpacity>
    <View>
      stuff
    <View>
  </TouchableOpacity>
</Animated.View>`

Answer 3

我的变种。这个自定义AnimatedPressable也可以在里面使用Animated.View。

import {Text, Animated, Pressable} from 'react-native'
    
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
    
export default () => {
  return (
     <AnimatedPressable onPress={()=>alert('test onPress')}>
        <View>
           <Text>{'....'}</Text>
        </View>
     </AnimatedPressable>
  )
}