Изменить touchableopacity backgroundColor на кнопку нажать реагировать родной

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