选择后更改按钮的颜色，如果选择了第二个按钮，则取消选择所选按钮

Question

const renderitem = () => {
    return (
      <TouchableHighlight
        onPress={props.onClick}
      >
       <Text>{props.title}</Text>
      </TouchableHighlight>
    );
  };

我正在创建一个函数来在 Flatlist 中呈现一个按钮，当我 select 一个按钮我想更改 [=13= 的颜色时，现在可以有多个基于 flatlist 中的数据的按钮]ed 按钮，当我 select 另一个按钮时，我想取消 select 第一个按钮 selected 并将第一个按钮的颜色更改为原始颜色，现在更改颜色第二个按钮目前已 selected，请告诉我如何实现。

Answer 1

请使用状态变量作为样式颜色。例如style={color:buttonColor1}

Answer 2

const App = () => {
  const [options, setOptions] = useState<string[]>(['One', 'Two', 'Three'])
  const [selected, setSelected] = useState('One')

  const Item = ({ item, index }) => (
    <Pressable onPress={() => setSelected(item)}>
      <Text style={{ color: selected === item ? '#ff00ff' : '#000000' }}>
        {item}
      </Text>
    </Pressable>
  )

  return (
    <FlatList
      data={options}
      renderItem={Item}
    />
  )
}

选择后更改按钮的颜色，如果选择了第二个按钮，则取消选择所选按钮

Chnage the color of button once selected and deselect the selected button if 2nd button is selected

react-native