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

Question

I have 2 TouchableOpacity each having a View inside it.

I need to change View's backgroundColor to blue when its TouchableOpacity is pressed and to return to the initial backgroundColor when its TouchableOpacity is pressed a second time.

Here I don't want to use state because I have 2 or more TouchableOpacity so I need to have a state for every component .

Here is my code :

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

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

Answer 1

You can do this by using a single state and change backgroundColor by checking its value for ex:

Initial a data it contain id and initial color:

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',
  },
];

Here I initialise the isSelected to false and initial color to a id, Now we need to change isSelected to true and change its color to blue when user taps on that button.

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>
)