Touchable Opacity onPressIn 颜色变化答案

【问题标题】：Touchable Opacity onPressIn color changeTouchable Opacity onPressIn 颜色变化
【发布时间】：2019-07-12 20:37:41
【问题描述】：

我的 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 之前如何更改颜色？颜色应该是深色的。

【问题讨论】：

标签： react-native touchableopacity

【解决方案1】：

找到了解决办法。在 TouchableOpacity 中设置 activeOpacity={1}。

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

【讨论】：

【解决方案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

【讨论】：