21

I am trying to figure out how to change the volume of the opacity of TouchableOpacity component of React-Native, meaning that I do not like the default value of the opacity when the press is performed, and I would like the opacity to be less transparent.

According to the documentation for this purpose the Animated API should be used:

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.

So, I did it, that's how it looks:

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

The hideKeyboard method, that is being invoked onPress, calls the changeOpacity method from within it, that's how it looks:

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

this.state.opacity is declared in the constructor:

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

Having all of this, the behavior (the volume of the opacity onPress of TouchableOpacity) does not change, it is still stays default. The documentation also vaguely introduces setOpacityTo method, but I can't figure out how to use it due to the thoroughness of the description provided in the documentation. How can I perform a manual configuration of the opacity?

4

1 回答 1

56

你试过这个

<TouchableOpacity 
  activeOpacity={.7} // default is .2
  ... other props here
/>
于 2017-08-03T10:49:51.297 回答