按下后更改Touchable / Pressable Item的背景颜色

【问题标题】：Change the backgroundcolor of Touchable / Pressable Item after pressing按下后更改Touchable / Pressable Item的背景颜色
【发布时间】：2020-11-05 01:26:03
【问题描述】：

我目前正在使用 react native 开发应用原型。有很多关于如何在按下时更改组件颜色的方法，这里是 Touchable 或 Pressable (=> onPress)。但是如何在单击后永久更改此类组件的背景颜色 - 使用 onPressOut?。示例：

默认情况下具有绿色背景的简单“点击我”组件。如果单击一次，它应该变为红色背景。再次点击，它应该会变回绿色（等等）。

你能帮我解决这个问题吗？

【问题讨论】：

标签： react-native onpress

【解决方案1】：

你需要使用组件的state来控制它。

我为你做了一个现场演示：

https://codesandbox.io/s/silent-sea-5331l?file=/src/App.js

import React, { useState } from "react";
import { View, TouchableOpacity } from "react-native";

const App = props => {
  const [selected, setSelected] = useState(false);

  return (
    <View style={{ width: "30%", alignItems: "center", marginTop: 20 }}>
      <TouchableOpacity
        onPress={() => setSelected(!selected)}
        style={{ backgroundColor: selected ? "red" : "transparent" }}
      >
        Press me
      </TouchableOpacity>
    </View>
  );
};

export default App;

【讨论】：