按下时可触摸不透明度颜色变化

Question

我的

React-Native

应用程序中有以下代码。

     <TouchableOpacity
       // onPress={onPress}
       onPressIn={this.handlePressIn}
       onPressOut={this.handlePressOut}
       disabled={disabled}
       style={[
         styles.button,
         buttonStyle,
         this.buttonStyles(),
       ]}
       >
         <Text>Hello</Text>
       </TouchableOpacity> 

我想改变按下时

TouchableOpacity

的颜色。因此，在

onPressIn

中，我将颜色更改为暗红色，但它显示浅红色或类似的东西。那里不能设置深色。这里有什么问题呢？我怎样才能改变颜色直到我

onPressOut

？颜色应该是深色的。

Answer 1

找到解决方案。在 TouchableOpacity 中设置 activeOpacity={1}。

 <TouchableOpacity
   onPress={onPress}
   activeOpacity={1}
/>

Answer 2

编辑：

我想我有点过度设计了。您只需使用

activeOpacity={1}

属性即可。

问题：

问题在于，

TouchableOpacity

已经通过降低按钮的不透明度提供反馈，允许用户按下按钮时可以看到背景。因此，即使您更改按钮的背景颜色，您也不会注意到它。幸运的是，我有一个解决方案给你。

解决方案：

您可以将

TouchableWithoutFeedback

与附加视图一起使用来创建您想要的行为。

代码：

<TouchableWithoutFeedback
onPressIn={() => this.setState({pressIn: true })}
onPressOut={() => this.setState({pressIn: false})}
>
<View
// change the color depending on state 
style={{ backgroundColor: this.state.pressIn ? '#4c7d4c': '#98FB98'}} 
>
   <Text> Custom Button </Text>
</View>
</TouchableWithoutFeedback>

输出：

工作示例：

https://snack.expo.io/@tim1717/quiet-watermelon