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

【问题标题】：How to make React Native Animated.View clickable?如何使 React Native Animated.View 可点击？
【发布时间】：2015-12-20 16:41:57
【问题描述】：

我正在使用这个 react native tinder demo -> https://github.com/brentvatne/react-native-animated-demo-tinder

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

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

【问题讨论】：

标签： javascript ios animation react-native

【解决方案1】：

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

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

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

【讨论】：

实际上这应该是选择的答案，因为包裹在 Animated.View 中可能会弄乱您的样式并需要不必要的 View
只有onPress 工作，但动画无效。你能推荐点什么吗？
尝试使用并查看动画是否以这种方式工作。如果不是，那么您可能没有正确地制作动画
我确实做了同样的事情。Animated.View 按预期工作，但不高于建议的方法。
@Oleg 我能够解决它，这是由于 native-base

【解决方案2】：

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

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

【讨论】：

我做到了，但它禁用了动画。 @Denny 你有它的解决方案吗？
它还为我禁用了动画。
视图渲染——<TouchableOpacity> 的backgroundColor 可以渲染，但onPress 事件没有注册。
请记住，如果您将 Animated.View 和 TouchableOpacity 的顺序反过来，那么在某些 iPhone 上它将无法工作 - 视图不会总是可触摸的（我认为它是不可预测的出）
额外的这里是多余的，因为 TouchableOpacity 本身就是一个 View 并且理解所有 View 的 props

【解决方案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>
  )
}

【讨论】：

【解决方案4】：

为时已晚，但在我的情况下，我将 Animated.View 的高度设置为小于其中的内容

因此请确保 Animated.View 的高度必须大于或等于放置 TouchableOpacity 的内容

【讨论】：

【解决方案5】：

就我而言，它在我使用时无法在 Android 上运行

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>

【讨论】：

【解决方案6】：

当我尝试通过按下背景来制作可关闭的底页时，什么对我有用

是这样吗：

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

};

归功于 React Native Paper Modal 组件 https://github.com/callstack/react-native-paper/blob/master/src/components/Modal.tsx#L184

【讨论】：

【解决方案7】：

检查 ref 值怎么样？在下面的示例中，我使用滑动并通过检查 translation.dx._value 来模拟 <TouchableOpacity /> onPress 操作

export const CoolComponent = () => {
  const theme = StyleSheet.create({
    blockPosition: {
      transform: [{translateX: translation.x}],
    },
  });

  const translation = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponderCapture: () => true,
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponderCapture: () => false,
      onPanResponderMove: Animated.event(
        [
          null,
          {
            dx: translation.x,
          },
        ],
        {
          useNativeDriver: false,
        },
      ),
      onPanResponderRelease: checkTranslationCoords,
      onPanResponderTerminate: checkTranslationCoords,
    }),
  ).current; 

  const checkTranslationCoords = () => {
    if (Math.abs(translation.x._value) === 0) {
      // TouchableOpacity action here
    }
  };

  return (
    <Animated.View
      {...panResponder.panHandlers}
      style={[theme.blockPosition]}
    >
      <Text>Some text</Text>
      </Animated.View>
  )
}

【讨论】：

【解决方案8】：

你需要编写一个方法在 .

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

在 render() 的顶部你需要用这个方法写动画样式

_onPressButton(){
........
........
}

【讨论】：