Javascript 更改按钮上的touchableopacity背景色按react native

我想在react native中更改按下时动态生成的TouchableOpacity BackgroundColor。

TouchableOpacity修改不透明度（如其名称所示）。

---

如果要更改触摸屏上的背景色，请改用TouchableHighlight，以下代码将在按下时设置随机背景色

它的工作原理是在印刷机上设置状态颜色，在其样式中，有一个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;

import React，{useState}来自“React”；
从“react native”导入{StyleSheet，TouchableOpacity}；
常量颜色=[‘红色’、‘橙色’、‘黄色’、‘蓝色’、‘绿色’、‘靛蓝’、‘紫色’]；
const getcolor=（）=>colors[Math.floor（Math.random（）*colors.length）]；
常量按钮=道具=>{
const[color，setcolor]=useState（getcolor（））；
常量handleClick=（）=>{setcolor（getcolor（））；}
返回(
);
}
const styles=StyleSheet.create({
按钮：{
边框颜色：“黑色”，
边框宽度：1，
宽度：50，
身高：50，
}
});
导出默认按钮；

React Native最新版本0.63.0引入了最新的酷炫组件Pressable。你可以用它来改变新闻的背景色

看看

---

使用

touchable highlight

代替，使用

underlayColor

prop您是否尝试过自己解决这个问题？我们能看看你的密码吗？{No}btnClick（）{//要更改背景色}underlayColor用于悬停我想设置TouchableOpacity的背景色我已经使用了TouchableHighlight但onPress事件如何更改TouchableHighlight背景色？我正在尝试在按下时切换TouchableHighlight的背景色…例如按下时背景色应变为蓝色，再按一下按钮，背景就会变成白色。