在 React-Native 中手动设置 opacity 的 onPress of TouchableOpacity 的音量答案

【问题标题】：Set opacity's volume onPress of TouchableOpacity manually in React-Native在 React-Native 中手动设置 opacity 的 onPress of TouchableOpacity 的音量
【发布时间】：2018-01-10 22:13:09
【问题描述】：

我想弄清楚如何改变 React-Native 的 TouchableOpacity 组件的不透明度的音量，这意味着我不喜欢按下时不透明度的默认值，我希望不透明度不那么透明。

根据documentation，应使用Animated API：

不透明度是通过将子项包装在 Animated.View 中来控制的，该 Animated.View 将添加到视图层次结构中。请注意，这会影响布局。

所以，我做到了，看起来就是这样：

<Animated.View style={{ opacity: this.state.opacity._value }}>
    <TouchableOpacity 
        onPress={this.hideKeyboard.bind(this)}
        style={{ opacity: this.state.opacity._value }}
    >
        <Text style={buttonTextStyle}>Cancel</Text>
    </TouchableOpacity>
</Animated.View>

onPress 调用的 hideKeyboard 方法从其内部调用 changeOpacity 方法，如下所示：

changeOpacity() {
    Animated.timing(
        this.state.opacity, 
        {
            toValue: this.state.opacity === 1 ? 0 : 1,
            duration: 500
        }
    ).start();
}

this.state.opacity 在构造函数中声明：

constructor(props) {
    super(props);
    this.state = { opacity: new Animated.Value(1) };
}

拥有所有这些后，行为（TouchableOpacity 的不透明度 onPress 的音量）没有改变，它仍然保持默认。文档也含糊地介绍了 setOpacityTo 方法，但由于文档中提供的描述的彻底性，我无法弄清楚如何使用它。如何手动配置不透明度？

【问题讨论】：

标签： javascript reactjs button react-native touchableopacity

【解决方案1】：

你试过了吗

<TouchableOpacity 
  activeOpacity={.7} // default is .2
  ... other props here
/>

【讨论】：

谢谢，但我试过了，动画太慢了。它不仅会在两个值之间弹出，而且会在 0.7 上停留一段时间，然后才返回。
这个问题可能在开发模式下发生，一般在 react native 中，尝试构建生产版本并检查。
我创建了一个新项目，它只有这个 TouchableOpacity，它可以按我的预期工作。因此，即使关闭了调试器，我在实际项目中的代码量也会影响其性能，对吗？
它不依赖于代码量，应该在生产和真实设备上正常工作。
嗯，仅包含 TouchableOpacity 的基本项目在测试模式下确实可以正常工作，但实际项目，正如我上面所说的，并没有像测试项目那样迅速地将不透明度恢复正常。