React Native：自定义 TouchableOpacity 动画速度答案

【问题标题】：React Native: Customizing TouchableOpacity Animation SpeedReact Native：自定义 TouchableOpacity 动画速度
【发布时间】：2017-11-15 23:08:58
【问题描述】：

根据TouchableOpacitydocs，有一个activeOpacity 属性可以更改最终不透明度级别，还有一个setOpacityTo 函数可以将组件动画到任何不透明度级别。似乎没有任何关于改变动画的速度。

我将如何改变动画速度？有这方面的道具吗？我需要自定义Animated.View吗？

【问题讨论】：

标签： javascript android ios reactjs react-native

【解决方案1】：

这将是方法的持续时间部分......

setOpacityTo(value: number, duration: number)

React-native 在后台使用 setOpacityTo 使用 setNativeProps with TouchableOpacity 为不透明度设置动画。

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

因此，如果您愿意，您也可以创建自己的动画事件。这是how touchable opacity uses setOpacityTo，确保将useNativeDriver 设置为true。

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

【讨论】：

你知道当按下TouchableOpacity 时我将如何使用setOpacityTo 覆盖默认动画吗？
@GabrielWest 我已经更新了我的答案，添加了一些可以让你走上正确道路的花絮。