如何在本机反应中简要更改触摸时的背景颜色？答案

【问题标题】：How to briefly change the background color on touch in react native?如何在本机反应中简要更改触摸时的背景颜色？
【发布时间】：2018-06-30 12:46:26
【问题描述】：

在移动应用中，显示用户已触摸特定元素的某种指示至关重要，尤其是在尝试触摸将重定向的元素时。因此，我希望在触摸时更改 touchableOpacity 元素的背景颜色，然后恢复为原始背景颜色。

例如，如果用户触摸了这个元素：

触摸时背景颜色会改变。

如何在touchableOpacity 中执行此操作？

<TouchableOpacity 
  style={[styles.verticalCenter, styles.floatRight]} 
  activeOpacity={1.0} 
  underlayColor="rgba(253,138,94,0)" 
  onPress={()=> this.openModal()} 
>
  <Ionicons name="log-out" size={16} color="#bccad0" />
</TouchableOpacity>

floatRight: {
  flex: 1,
  alignItems: 'center',
  borderWidth: 1,
  borderColor: 'rgba(0,0,0,0.2)',
  justifyContent: 'center',
  width: 30,
  height: 30,
  backgroundColor: '#fff',
  borderRadius: 100 / 2,
},

以上方法都行不通。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript android reactjs react-native touchableopacity

【解决方案1】：

使用TouchableHighlight 代替 TouchableOpacity

<TouchableHighlight
    activeOpacity={0.6}
    underlayColor="#DDDDDD"
    onPress={() => alert('Pressed!')}>
    <MyComponent />
</TouchableHighlight>;

【讨论】：

【解决方案2】：

如果您设置activeOpacity={0.2}，它将使背景更亮。当您将不透明度设置为 1 时，它不会在点击时更改。

【讨论】：

问题是，即使您的建议有效，它也会产生另一个我之前试图避免的问题。在那，背景打火机并不是一个真正的圆形，它只是变成了一个正方形。但是，如果我将打火机分配给图标本身，那么它可以解决问题。
如何改变颜色？不透明