javascript - 在 React-Native 中手动设置不透明度的音量 onPress of TouchableOpacity

标签 javascript reactjs button react-native touchableopacity

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

根据documentation为此目的 Animated API应该使用:

Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.

所以,我做到了,这就是它的样子:

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

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方法,但是由于文档中提供的描述太透彻,我不知道如何使用它。如何手动配置不透明度?

最佳答案

你试过吗

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

关于javascript - 在 React-Native 中手动设置不透明度的音量 onPress of TouchableOpacity,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45481957/

相关文章:

css - React Router 如何在父元素上设置过渡

reactjs - 在 React 中(不是 native react ): The behavior for Date objects stored in Firestore is going to change AND YOUR APP MAY BREAK

WPF按钮图像仅显示在最后一个控件中

javascript - 使用 facebook 图形 API 的长轮询(用于 "real-time"通知)

javascript - 包含变量的 jQuery 文件上传

css - 使用 React 过渡组保持元素对齐

swift - Swift 中具有多个可访问标签和图像的按钮

python - Tkinter 按钮命令返回值?

javascript - 使用 Javascript 签署数据

javascript - 选中复选框时显示按钮