触摸式不透明onPressIn颜色变化

Question

我的RN应用程序中有以下代码。

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

我想在按下TouchableOpacity时更改其颜色。因此，在onPressIn中，我将颜色更改为darkRed，但它显示的是浅红色或类似的颜色。那里不能设置深色。这是什么问题？在onPressOut之前如何更改颜色？颜色应该是深色。

Answer 1

修改：

我想我对它进行了一些过度设计。您可以简单地使用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

Answer 2

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

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