react-native - OnPress 从循环中改变组件的样式- React Native with hooks

Question

所以我在 React Native 方面很新，我正在尝试开发一个问答游戏，用户将获得一组答案。我想选择在用户按下组件时更改组件的颜色，有点切换它。到目前为止，我想出了 useState 解决方案，但不幸的是无法弄清楚如何排除颜色的变化，我想我需要遵循索引或其他东西，任何人都可以让我理解解决方案的过程。

export const QuizScreen = ({ navigation,route }) => {
    const [quizArray, setQuizArray] = React.useState([])
    const [rightAnswer, setRightAnswer]= React.useState(false)
    const [selectBtn, setSelectBtn] = React.useState("#fff")
return(
     <View>
       {quizArray[qno].answer.map(r=>
        <TouchableHighlight style={[styles.listItem, {backgroundColor:selectBtn}]}
           onPress={()=>{
            setRightAnswer(r.rightAnswer)
            setSelectBtn("#DDDDDD")   //so this changes logically all the component from the list
                }}
                activeOpacity={0.6} underlayColor="#DDDDDD"
                    
                >
                <Text>{r.option}</Text>
             </TouchableHighlight>
             
            )}
           </View>

我需要知道如何只为一个实现背景更改，并让它在每次用户选择或取消选择时切换。谢谢

标签： react-nativereact-hooksuse-state

Answer 1

您使用索引来确定单击的列表项是正确的。

您可以通过使用 selectBtn 状态存储所选项目的索引来更改颜色，然后使用该状态相应地设置背景颜色。

您可以这样做：

export const QuizScreen = ({ navigation, route }) => {
  const [quizArray, setQuizArray] = React.useState([]);
  const [rightAnswer, setRightAnswer] = React.useState(false);
  const [selectBtn, setSelectBtn] = React.useState(null);
  return (
    <View>
      {quizArray[qno].answer.map((r, index) => (
        <TouchableHighlight
          style={[
            styles.listItem,
            { backgroundColor: selectBtn === index ? '#dddddd' : '#fff' },
          ]}
          onPress={() => {
            setRightAnswer(r.rightAnswer);
            setSelectBtn(index);
          }}
          activeOpacity={0.6}
          underlayColor="#DDDDDD">
          <Text>{r.option}</Text>
        </TouchableHighlight>
      ))}
    </View>
  );
};

这是工作示例：Expo Snack

2