javascript - 更改 touchableopacity backgroundColor on button press react native

Question

我想在本机反应中更改动态生成的 TouchableOpacity BackgroundColor OnPress。

Answer 1

TouchableOpacity 修改不透明度（正如它的名字所说）。如果您想在触摸时更改背景颜色，请改用 TouchableHighlight

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;