如何在本机反应中给出复选框？

Question

如何在 react native 中设置 ul li 组件的样式？当我在做一个 lms 应用程序时，对于问答部分，我想列出带有相应复选框的问题的多个选项，并保存所选项目的值。来自服务器的获取响应如下。

json

{
    "content": "<p><strong>Preliminary Exam</strong></p>\n",
    "meta": {
        "access": 1,
        "status": 0,
        "progress": 0,
        "marks": 0,
        "max": 60,
        "questions": [{
            "type": "single",
            "hint": "",
            "explanation": "",
            "content": "<p>2.Question 2</p>\n",
            "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>
    );
     } 

Answer 1

对于这个问题，我强烈建议制作一个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>
    )
  }