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;

Answer 3

React Native最新版本0.63.0引入了最新的炫酷组件Pressable！

检查一下！

https://www.youtube.com/watch?v=MLgmJCWyFmk

更改touchableopacity backgroundColor按下按钮时反应本机

3 个答案: