Touchable Opacity 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 中，我将颜色更改为深红色，但它显示浅红色或类似的颜色。那里不能设置深色。这里的问题是什么？如何在 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}
/>

Touchable Opacity onPressIn颜色变化

Touchable Opacity onPressIn color change

react-native

touchableopacity