How to make React Native Animated.View clickable?

问题:

I'm using this react native tinder demo -> https://github.com/brentvatne/react-native-animated-demo-tinder

Is it possible to make the cards 'clickable' so it would navigate to another view on click? I've tried wrapping the "Touchable" components around the animated view but doing so disables the animations.

Any ideas would be highly appreciated, thanks!

回答1:

I guess you can use TouchableX inside the Animated.View

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

回答2:

Another method (which worked better for me) is to create AnimatedTouchable component using createAnimatedComponent method of Animated:

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

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

回答3:

What works for me when i tried to make a dismissable bottomsheet by pressing on backdrop

was this :

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

};

Credit goes to React Native Paper Modal Component https://github.com/callstack/react-native-paper/blob/master/src/components/Modal.tsx#L184

回答4:

it's too late but in my case i have set the height of Animated.View less than the content inside it

so make sure that the Animated.View height must be greater or equal to the content on which TouchableOpacity is placed

回答5:

In my case it was not working on Android, when I was using

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

Use TouchableOpacity provided by React Native.

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:

you need to write a method to animate inside the .

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

in top of the render () you need to write the animated style with in this method

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