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

Posted 2023-03-10

【中文标题】在 React-Native 中手动设置 opacity 的 onPress of TouchableOpacity 的音量

【英文标题】：Set opacity's volume onPress of TouchableOpacity manually in React-Native

【发布时间】：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 方法，但由于文档中提供的描述的彻底性，我无法弄清楚如何使用它。如何手动配置不透明度？

【参考方案1】：

你试过了吗

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

【讨论】：

谢谢，但我试过了，动画太慢了。它不仅会在两个值之间弹出，而且会在 0.7 上停留一段时间，然后才返回。

这个问题可能在开发模式下发生，一般在 react native 中，尝试构建生产版本并检查。

我创建了一个新项目，它只有这个 TouchableOpacity，它可以按我的预期工作。因此，即使关闭了调试器，我在实际项目中的代码量也会影响其性能，对吗？

它不依赖于代码量，应该在生产和真实设备上正常工作。

嗯，仅包含 TouchableOpacity 的基本项目在测试模式下确实可以正常工作，但实际项目，正如我上面所说的，并没有像测试项目那样迅速地将不透明度恢复正常。