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

Question

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

是否可以制作卡片 'clickable' 以便在点击时导航到另一个视图？我试过将 "Touchable" 组件包裹在动画视图周围，但这样做会禁用动画。

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

Answer 1

我猜你可以在 Animated.View

中使用 TouchableX

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

Answer 2

您需要编写一个方法来在 .

中设置动画

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

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

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

Answer 3

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

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

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

Answer 4

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

这是 :

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 模态组件 https://github.com/callstack/react-native-paper/blob/master/src/components/Modal.tsx#L184

Answer 5

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

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

Answer 6

在我的例子中，当我使用

时，它无法在 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>

Answer 7

我的变体。这个自定义 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>
  )
}

Answer 8

检查参考值呢？在下面的示例中，我使用滑动并通过检查 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>
  )
}

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

How to make React Native Animated.View clickable?

javascript

animation

ios

react-native