React Native - 如何更改一个元素的颜色？答案

【问题标题】：React Native - how to change color on one element?React Native - 如何更改一个元素的颜色？
【发布时间】：2020-11-16 14:50:29
【问题描述】：

我正在尝试在本机反应中制作一个小型测验应用程序。目前我正试图弄清楚如何改变我按下的按钮的颜色。现在我所有按钮的颜色都发生了变化，这是不正确的，因为如果答案正确，我想显示绿色，如果答案不正确，我想显示红色。

问题是我正在使用钩子，感觉之前关于这个主题的大多数问题/答案都在使用类，我不太理解这一点。

我遇到了一个很好的解决方案，即在 stackoverflow 中发布此 jsfiddle https://jsfiddle.net/87zn91ga/1/ 的某个人（不记得名字）。不幸的是，这不是用钩子制作的，我一直在尝试阅读并理解如何转换它。

这是我的按钮/框/文本的代码或我应该称之为的任何代码，这是我希望发生颜色变化的地方。这里有一些代码我可能不会使用（对不起，如果它有点乱）。

<View
        style={tailwind(
          'flex-1 items-start justify-start flex-row flex-wrap h-64 mx-5',
        )}>
        {questions[currentQuestion].answerOptions.map((answerOption, i) => (
          <View
            key={i}
            style={tailwind(
              'w-40 h-32 m-1 border-2 border-white bg-blue-400',
            )}>
            {/* <Button title={item.text} onPress={() => console.log(item.id)} /> */}

            <Text
              // style={tailwind('h-32 text-white text-2xl')}
              style={{
                // backgroundColor: color,
                // color: textColor,

                color: clicked ? 'yellow' : 'red',
                height: '100%',
              }}
              onPress={(index) => {
                handleAnswerOptionClick(answerOption.isCorrect);
                setCount(1);
                // setFavorite(true);
                setClicked(i);
                handleClick(i);
              }}>
              {answerOption.answerText}
            </Text>
          </View>
        ))}
      </View>

所以我想获得帮助的是制作一个钩子，它将根据答案是否正确将按下的框/按钮的颜色更改为绿色或红色。我很确定我可以弄清楚如何做出显示正确颜色的声明。

谢谢！最好的尊重

【问题讨论】：

标签： reactjs react-native react-hooks stylesheet

【解决方案1】：

你可以尝试做下一个功能：

const [color, setColor] = useState("")
const changeColor = () => {
    clicked ? setColor("yellow") : setColor("red")
}

你的风格是这样的：

style={{color: {color} }}

【讨论】：

【解决方案2】：

如果你使用 React Native 0.63.x，你可以使用 <Pressable/> 组件

import { Pressable } from 'react-native';

<Pressable
  onPress={(index) => {
    handleAnswerOptionClick(answerOption.isCorrect);
    setCount(1);
    // setFavorite(true);
    setClicked(i);
    handleClick(i);
  }}
>
  {({ pressed }) => (
    <Text
      style={[tailwind('h-32 text-white text-2xl'), { color: pressed ? 'yellow' : 'red' }]}
    >
      {answerOption.answerText}
    </Text>
  )}
</Pressable>;

【讨论】：