如何给出原生的复选框？

Posted 2021-05-06

如何设计ul li组件反应原生？因为我正在做一个lms应用程序，对于问题和答案部分，我想列出具有相应复选框的问题的多个选项，并且还保存所选项目的值。来自服务器的获取响应如下。

JSON

{
    "content": "<p><strong>Preliminary Exam</strong></p>
",
    "meta": {
        "access": 1,
        "status": 0,
        "progress": 0,
        "marks": 0,
        "max": 60,
        "questions": [{
            "type": "single",
            "hint": "",
            "explanation": "",
            "content": "<p>2.Question 2</p>
",
            "options": [
                "(a) one ",
                "(b) two  ",
                "(c) three ",
                "(d) four"
            ],
            "correct": "2",
            "marks": 4,
            "user_marks": 0,
            "status": 0,
            "marked": null,
            "auto": 1
        }]
    }
}

我在jsx中将问题呈现为card组件中的列表。我需要使用复选框列出问题的选项。怎么做？请帮忙。

更新

尝试了以下

import Checkbox from 'react-native-checkbox';

const ListWithCheckbox = ({details, checked, onPress}) => (
     <View style={{flexDirection: 'row'}}>
      <Checkbox checked onPress={onPress}/>
      <Text>{details}</Text>
     </View>
   )
render() {
    console.log(this.state);
    return(
<Swiper showsButtons={true} loop={true} dotColor="transparent"
            activeDotColor="transparent">
    {this.state.details.map(a =>
    <Card>
    <CardSection>
    <Text>{a.content = a.content.replace(regex , '')}</Text>
    </CardSection>
    <CardSection>

<ListWithCheckbox data={a.option} checked={this.state.checked} />
    </CardSection>
    </Card>
    )}
    </Swiper>
    );
     } 

答案

对于这个问题，我强烈建议制作一个checkbox组件和list with checkbox组件和map它与options array

例如，两个组件将是

const Checkbox = ({checked, onPress}) => (
  <TouchableOpacity onPress={onPress} style={{height: 40, width: 40, borderRadius: 10, borderColor: /*Some color*/,  borderWidth: 0.5}}>
    {checked ? ({/*render some icon here*/}) : (null)}
  </TouchableOpacity>
)

   const ListWithCheckbox = ({data, checked, onPress}) => (
     <View style={{flexDirection: 'row'}}>
      <Checkbox checked onPress={onPress}/>
      <Text style={{/*Your text styles*/}}>{data}</Text>
     </View>
   )

_toggleCheckbox = () => // Your Checkbox logic here, probably setState to the constructor


render() {
    return (
      <Card>
        <Question>{/*Set the question here*/}</Question>
        {yourResponse.options.map((option, index) => <ListWithCheckbox key={index} data={option.optionData} checked={this.state.checked} /> )}
      </Card>
    )
  }