在本机

Question

我正在使用本机做一个测验应用程序，我在PHP中编写了一个API，它从数据库中提取问题和选项，API的响应看起来像

[{"id":2109,
"title":"\u0915\u0930\u094d\u0923\u093e\u0932\u0940 \u0928\u0926\u0940\u0915\u094b \u0938\u0939\u093e\u092f\u0915 \u0928\u0926\u0940 \u0924\u0932\u0915\u093e \u092e\u0927\u094d\u092f\u0947 \u0915\u0941\u0928 \u0939\u094b\u0907\u0928 ?",
"option":[{
     "option_id":191061,
     "options":"\u0939\u0941\u092e\u094d\u0932\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
     "correct":0
},
{
     "option_id":191062,
     "options":"\u0920\u0942\u0932\u094b \u092d\u0947\u0930\u0940",
     "correct":0},
{
     "option_id":191060,
     "options":"\u092e\u0941\u0917\u0941 \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
     "correct":0
},{
     "option_id":191059,
     "options":"\u0921\u094b\u0932\u094d\u092a\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
     "correct":1
}
]}]
................................

等等，

到目前为止，我已经成功地以我喜欢的方式在我的反应应用程序中获取了json。但是现在我想为每个问题只选择一个选项，我希望根据用户选择突出显示该选项，我还要通过使用json响应进行验证来检查用户是否正确。

我怎样才能做到这一点？

完整的代码在这里：

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TouchableHighlight,
 Alert,
 Navigator,
 WebView,
 ScrollView,
 ListView
} from 'react-native';
export default class Api extends Component{
  constructor(){
   super()
   this.state = {
     id:'',
    option_id:'',
  option_option:[],
  options_ans:[],
  title:'',
  data:[],
  userSelectedIndex:-1,
  }
  }

  componentWillMount(){
     fetch('http://192.168.1.11/loksewaquiz/index.php?      exam_of=kharidar', {method: 'GET'})
 .then((response) => response.json())
.then((responseData) =>{
    this.setState({
      data:responseData,
    })
   })
  .done();
  }
   onUserSelectedOption(index){
    this.setState({
      userSelectedIndex:index,

    });
  }
  render(){

    const result = this.state.data.map((data) =>{
    const xx = data.ans_option.map((ans_option,index)=>{
      return (
        <TouchableHighlight onPress={()=>   this.onUserSelectedOption(ans_option, index)}>
         <Text key={ans_option.option_id} style={{backgroundColor:   (index === this.state.userSelectedIndex) ? 'red' : 'transparent'}}>  {ans_option.option_option}</Text>
       </TouchableHighlight>
      )
     })

    return(
      <View>
        <Text style={styles.titles}>{data.title}</Text>
       {xx}
       </View>
    )

  })
  return(
    <ScrollView>
      {result}
    </ScrollView>

    );
  }

}

 const styles = StyleSheet.create({
 container: {
  flex: 1,
  flexDirection:'row',
  justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
  },
 button:{
   backgroundColor:'#EEE',
   padding:10,
   marginRight:5,
   marginLeft:5,
   },
  options:{
   padding:10,
   marginRight:5,
   marginLeft:5,
   backgroundColor:'#EEE',
   },
   titles:{
    backgroundColor:'#000',
    color:'#FFF',
  },
  selectedoptions:{
    backgroundColor:'#008000',
  }
  });

Here is the image when I select the first option

This is when I press the third option

Answer 1

像这样的东西，用突出显示的方法之一进行更新

CREATE TABLE tbl (
    id uuid,
    name text,
    description text,
    ...
    PRIMARY KEY (id, name, description)
);

Answer 2

我实际上会在新组件中分隔选项，并通过道具传递相关数据。不是js的专家，但听起来比嵌套的地图功能更坚固。