React Native：按下 TouchableOpacity 时更改视图颜色

Question

我有 2 个 TouchableOpacity，每个都有一个 View。

我需要在按下 TouchableOpacity 时将 View 的 backgroundColor 更改为蓝色，并在第二次按下其 TouchableOpacity 时返回初始 backgroundColor。

这里我不想使用状态，因为我有 2 个或更多的 TouchableOpacity，所以我需要为每个组件都有一个状态。

这是我的代码：

<TouchableOpacity>
<View style={{backgroundColor:'green'}}>
</View>
</TouchableOpacity>

<TouchableOpacity>
<View style={{backgroundColor:'yellow'}}>
</View>
</TouchableOpacity>

Answer 1

您可以通过使用单个状态来做到这一点，并通过检查其值来更改背景颜色：

初始化一个包含id和初始颜色的数据：

const DATA = [
  {
    id: 1,
    isSelected: false,
    initialBg: 'green',
  },
  {
    id: 2,
    isSelected: false,
    initialBg: 'red',
  },
  {
    id: 3,
    isSelected: false,
    initialBg: 'yellow',
  },
  {
    id: 4,
    isSelected: false,
    initialBg: 'black',
  },
];

这里我将 isSelected 初始化为 false 并将初始颜色初始化为 id，现在我们需要将 isSelected 更改为 true 并在用户点击该按钮时将其颜色更改为蓝色。

const [isSelected, setIsSelected] = useState(DATA);
const onItemSelect = (item) => {
    let newState;
    if (item.isSelected) {
      newState = isSelected.map((isSelectedItem) =>
        isSelectedItem.id === item.id
          ? {...isSelectedItem, isSelected: false}
          : {...isSelectedItem},
      );
    } else {
      newState = isSelected.map((isSelectedItem) =>
        isSelectedItem.id === item.id
          ? {...isSelectedItem, isSelected: true}
          : {...isSelectedItem},
      );
    }
    setIsSelected(newState);
  };

return(
<View>
  {isSelected.map((item) => (
          <TouchableOpacity onPress={() => onItemSelect(item)} key={item.id}>
            <View
              style={{
                backgroundColor: item.isSelected ? 'blue' : item.initialBg,
                width: 50,
                height: 50,
              }}></View>
          </TouchableOpacity>
        ))}
</View>
)