Javascript 如何使React原生动画。视图可单击？

我正在使用这个react native tinder演示->

是否有可能使卡片“可点击”，以便在点击时导航到另一个视图？我尝试过在动画视图周围包装“可触摸”组件，但这样做会禁用动画

---

任何想法都将不胜感激，谢谢

我想你可以在

动画视图中使用TouchableX

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


东西
您需要编写一个方法来在内部设置动画

renderButton: function() {
  return (
    <TouchableOpacity onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableOpacity>
  );
},

另一种方法（对我来说效果更好）是使用动画的createAnimatedComponent方法创建动画可触摸组件：

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

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

const AnimatedTouchable=Animated.createAnimatedComponent（TouchableOpacity）；
这里的东西
当我试图通过按压背景制作一张可撤销的底片时，什么对我有效

是这样的：

const renderBackdrop = () => {
const animatedBackdropOpacity = Animated.interpolate(fall, {
  inputRange: [0, 1],
  outputRange: [0.5, 0],
});

return (
  <Animated.View
    pointerEvents={pointerEvents}
    accessibilityViewIsModal
    accessibilityLiveRegion="polite"
    style={StyleSheet.absoluteFill}>
    <TouchableWithoutFeedback onPress={_closeBs}>
      <Animated.View
        style={[
          styles.backdropContainer,
          {
            opacity: animatedBackdropOpacity,
          },
        ]}
      />
    </TouchableWithoutFeedback>
  </Animated.View>
);

const renderBackdrop=（）=>{
const animatedbackdropacity=已设置动画。插值（秋天{
输入范围：[0，1]，
输出范围：[0.5,0]，
});
返回(
已经太晚了，但就我而言，我已经设置了动画的高度。查看的内容要少于其中的内容

因此，请确保动画.View高度必须大于或等于放置TouchableOpacity的内容
在我的情况下，当我使用

import { TouchableOpacity } from 'react-native-gesture-handler'

使用React Native提供的
TouchableOpacity

import { TouchableOpacity } from 'react-native'
const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

<Animated.View>
<AnimatedTouchable onPress={() => this.props.navigation.goBack()}>
      <BackButton style={{ height: '100%', width: '100%' }} />
    </AnimatedTouchable>

</Animated.View>

从'react native'导入{TouchableOpacity}
const AnimatedTouchable=Animated.createAnimatedComponent（TouchableOpacity）；
this.props.navigation.goBack（）}>
我的变体。此自定义
动画可按
也可在
动画视图中使用

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>
  )
}

从'react native'导入{文本、动画、可按}
const AnimatedPressable=Animated.createAnimatedComponent（可按）；
导出默认值（）=>{
返回(
警报（'test onPress'）}>
{'....'}
)
}
我这样做了，但它禁用了动画。你得到了它的解决方案@Denny吗？它也为我禁用了动画。视图渲染--
的
背景色可以渲染，但是
onPress
事件没有注册。请记住，如果反之亦然，
动画的顺序。视图
和
触摸bleOpacity
然后在某些iPhone上它将不起作用-视图将不总是可触摸的（我发现这是不可预测的）这里的附加内容是多余的，因为TouchableOpacity本身就是一个视图，并且能够理解所有视图的属性。实际上，这应该是选择的答案，因为在
动画中包装。视图
可能会弄乱您的样式，需要不必要的
视图
只有
onPress
在工作，但不需要动画。您能提出一些建议吗？试试看使用并查看动画是否以这种方式工作。如果不是，则您可能无法正确设置动画。我做了同样的事情。
设置动画。
视图按预期工作，但不高于建议的方法。@Oleg我能够解决它，这是由于本机基础
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>
  )
}