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

Question

在移动应用程序中，显示用户已触摸特定元素的某种指示至关重要，尤其是在尝试触摸将重定向的元素时。因此，我希望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,
},

以上只是行不通。

任何帮助，将不胜感激。

Answer 1

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

Answer 2

使用TouchableHighlight代替 TouchableOpacity

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