React Native中按钮按下时如何改变TouchableOpacity的背景颜色？

Question

我想在React Native中的按下操作中动态更改TouchableOpacity的背景颜色。

- Developer

---

请使用TouchableHighlight代替，并使用underlayColor属性。 - jose920405

你尝试过自己解决这个问题吗？我们可以看一下你的代码吗？ - Jonathan Rys

<TouchableHighlight style={Appearance[0]} onPress={this.btnClick.bind(this, infoDetails[index])} disabled={isDisabled}> <Text style={Appearance[1]} >{No}</Text> </TouchableHighlight > - Developer

btnClick(){//想要改变背景颜色} - Developer

underlayColor 用于悬停，我想设置 TouchableOpacity 的背景颜色。 - Developer

React Native最新版本0.63.0引入了最新的酷炫组件Pressable。您可以使用它在OnPress事件中更改BackgroundColor，快去看看吧！https://www.youtube.com/watch?v=MLgmJCWyFmk - Dinesh R Rajput

Answer 1

TouchableOpacity修改了不透明度（正如其名称所示）。 如果您想在触摸时更改背景颜色，请改用TouchableHighlight。

- Guillaume Piedigrossi

---

我已经使用了TouchableHighlight，但是在onPress事件中如何更改TouchableHighlight的背景颜色？ - Developer

我正在尝试在TouchableHighlight的onPress事件中切换背景颜色...例如，按下时它的背景颜色应该变为蓝色，再次按下时它的背景颜色应该变为白色。 - Developer

Answer 2

以下代码将在按下时设置随机背景颜色。

它的工作原理是在按下时设置状态颜色，在其样式中，有一个backgroundColor对象，其值使用状态颜色。

import React, { useState } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';

const colours = ['red', 'orange', 'yellow', 'blue', 'green', 'indigo', 'violet'];

const getColour = () => colours[Math.floor(Math.random() * colours.length)];

const Button = props => {
  const [colour, setColour] = useState(getColour());
  const handleClick = () => { setColour(getColour()); }

  return (
    <TouchableOpacity style={[styles.button, { backgroundColor: colour }]} onPress={handleClick}></TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    borderColor: 'black',
    borderWidth: 1,
    width: 50,
    height: 50,
  }
});

export default Button;

- William Ku