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

Question

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

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

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

Answer 1

您需要使用stateof 组件来控制它。

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

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;