React Native Quiz功能：提交后高亮正确答案边框实现咨询

嘿，作为React Native新手能做到这一步已经很棒啦！要实现点击提交按钮后让正确选项显示绿色边框的效果，我们只需要加个状态来控制提交状态，再调整一下选项的样式逻辑就可以了，具体步骤如下：

1. 添加提交状态变量 #

首先在你的组件里新增一个isSubmitted状态，用来标记用户是否已经点击了提交按钮：

import { useState } from 'react';

// 组件内部新增状态
const [isSubmitted, setIsSubmitted] = useState(false);

2. 修改提交按钮的逻辑 #

点击提交时，除了更新分数，还要把isSubmitted设为true，这样我们就能触发正确选项的高亮逻辑：

<SmallRound 
  text="submit" 
  onPress={async()=>{
    try{
      // 用函数式更新分数，避免闭包依赖问题
      if(rightAnswer) setScore(prevScore => prevScore + 10);
      // 提交后标记状态为已提交
      setIsSubmitted(true);
    } catch (error) {
      alert(error.message);
    }
  }} 
/>

3. 调整选项的样式和交互 #

现在修改渲染选项的代码，在样式里添加判断：如果已经提交且当前选项是正确答案，就显示绿色边框；同时提交后禁止用户再切换选项，避免干扰结果展示：

{quizArray.answer.map((r, index) => (
  <TouchableHighlight 
    key={r._id || index} // 优先用选项唯一id，没有的话用index兜底
    style={[ 
      styles.listItem, 
      { 
        backgroundColor: selectBtn === index ? '#da1c5c' : '#fff',
        // 提交后给正确选项添加绿色边框
        borderWidth: isSubmitted && r.rightAnswer ? 2 : 0,
        borderColor: isSubmitted && r.rightAnswer ? '#2ecc71' : 'transparent'
      } 
    ]} 
    onPress={()=>{
      // 只有未提交状态下允许选择选项
      if (!isSubmitted) {
        setRightAnswer(r.rightAnswer);
        setSelectBtn(index);
      }
    }}
  >
    {/* 别忘了渲染选项文本，之前的代码里漏掉了这部分哦 */}
    <Text>{r.option}</Text>
  </TouchableHighlight>
))}

额外小提示 #

• 如果需要切换到下一题，记得要重置相关状态：setIsSubmitted(false)、setSelectBtn(null)、setRightAnswer(false)，这样下一题就能正常交互啦。
• 你可以根据自己的设计风格调整边框的宽度、颜色，比如用更深的绿色#1abc9c，或者给正确选项加个浅绿背景色，都是类似的判断逻辑。

内容的提问来源于stack exchange，提问作者Zeed Tanue