React Native：自定义TouchableOpacity动画速度

Question

According to the TouchableOpacity docs , there is an activeOpacity prop to change the end opacity level and there is a setOpacityTo function to animate the component to any opacity level. There doesn't seem to be anything about changing how fast the animation should take.

How would I go about changing the animation speed? Is there a props for this? Do I need to make my own custom Animated.View ?

Answer 1

That'd be the duration part of the method...

setOpacityTo(value: number, duration: number)

React-native is using setOpacityTo in the background to animate the opacity using the setNativeProps with TouchableOpacity .

setOpacityTo(value) {
  // Redacted: animation related code
  this.refs[CHILD_REF].setNativeProps({
    opacity: value
  });
},

So, it looks like you can also just create your own Animated event if you wanted to. Here's how touchable opacity uses setOpacityTo , making sure to set the useNativeDriver to true .

  setOpacityTo: function(value: number, duration: number) {
    Animated.timing(
      this.state.anim,
      {
        toValue: value,
        duration: duration,
        easing: Easing.inOut(Easing.quad),
        useNativeDriver: true,
      }
    ).start();
  },