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

Posted 2023-04-18

【中文标题】按下后更改Touchable / Pressable Item的背景颜色

【英文标题】：Change the backgroundcolor of Touchable / Pressable Item after pressing

【发布时间】：2020-11-05 01:26:03

【问题描述】：

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

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

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

【参考方案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;