如何根据数据条件更改 React Native 样式颜色

Question

我是新来的反应本地人。

我正在应用程序中开发一个简单的测验 function。 开发了一个返回问题、答案和正确答案 boolean 的 api，排序如下：

 {
   "question:"Demo question",
   "answer": [
               {
                   "rightAnswer": true,
                   "option": "demo answer 1"
               },
               {
                   "rightAnswer": false,
                   "option": "demo answer 2"
               },
               {
                   "rightAnswer": false,
                   "option": "demo answer 3"
               }
           ]
         }

rightAnswer 字段的目的是验证用户的答案是否正确。

在 React Native 中像这样向用户演示测验

            <Text> {quizArray.question}  </Text>
                    
                    
                    {quizArray.answer.map((r,index)=>
                    <TouchableHighlight key={r._id}
                          style={[
                            styles.listItem,
                            { backgroundColor: selectBtn === index ? '#da1c5c' : '#fff' }
                            

                          ]}
                        onPress={()=>{
                          setRightAnswer(r.rightAnswer)
                          setSelectBtn(index)
                        }}/>

setRightAnswer 是我的 state。

我有一个提交按钮，通过验证这样的答案来设置分数

                    <SmallRound 
                        text= "submit"
                        onPress={async()=>{
                                      try{
                                        if(rightAnswer) setScore(score+10)
                                        else(setScore(score+0)
                                       }catch (error) {
                                         alert(error.message)
                                         }
                                  }}
                     />

我想要的是在按下我的提交按钮后，我希望我的答案具有 rightAnswer==true 的边框颜色，比如说绿色。

Answer 1

像这样的东西

            <Text> {quizArray.question}  </Text>
          
                    {quizArray.answer.map((r,index)=>
                    <TouchableHighlight key={r._id}
                          style={[
                            styles.listItem,
                            { backgroundColor: selectBtn === index ? '#da1c5c' : '#fff' },
{r.rightAnswer && selectBtn === index ? borderColor: 'green' : borderColor: 'red'}
                            
                          ]}
                        onPress={()=>{
                          setRightAnswer(r.rightAnswer)
                          setSelectBtn(index)
                        }}/>

我想你也想改变你添加分数的方式

setScore(score + 10)