如何在React Native中制作动态复选框

Question

我正在制作一个React本机应用程序，在运行时我需要在该应用程序中进行复选框。我的意思是，从服务器我将获得json对象，该对象将具有ID和标签，用于复选框。想知道从服务器获取数据后如何制作复选框，我还可以处理复选框，我的意思是，将不存在静态的复选框，因此如何声明状态变量可以处理复选框。

该概念将在状态中使用一个数组，并使用您从服务响应中获得的数据设置状态数组，复选框在两个平台中都不可用，因此您必须使用React React - 本质元素。您可以使用地图功能从数组中渲染复选框，并具有相应更改状态的OnPress。代码将如下。您还必须考虑维护该州的支票值。

import React, { Component } from 'react';
import { View } from 'react-native';
import { CheckBox } from 'react-native-elements';
export default class Sample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { id: 1, key: 'test1', checked: false },
                { id: 2, key: 'test1', checked: true }
            ]
        };
    }
    onCheckChanged(id) {
        const data = this.state.data;
        const index = data.findIndex(x => x.id === id);
        data[index].checked = !data[index].checked;
        this.setState(data);
    }
    render() {
        return (<View>
            {
                this.state.data.map((item,key) => <CheckBox title={item.key} key={key}  checked={item.checked} onPress={()=>this.onCheckChanged(item.id)}/>)
            }
        </View>)
    }
}

这是一个示例，您可以做到这一点。您可以使用代码，以了解它的工作原理。

export default class App extends React.Component {
  state = {
    checkboxes: [],
  };
  async componentDidMount() {
    // mocking a datafetch
    setTimeout(() => {
      // mock data
      const data = [{ id: 1, label: 'first' }, { id: 2, label: 'second' }];
      this.setState({
        checkboxes: data.map(x => {
          x['value'] = false;
          return x;
        }),
      });
    }, 1000);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          {JSON.stringify(this.state)}
        </Text>
        {this.state.checkboxes.length > 0 &&
          this.state.checkboxes.map(checkbox => (
            <View>
              <Text>{checkbox.label}</Text>
              <CheckBox
                onValueChange={value =>
                  this.setState(state => {
                    const index = state.checkboxes.findIndex(
                      x => x.id === checkbox.id
                    );
                    return {
                      checkboxes: [
                        ...state.checkboxes.slice(0, index),
                        { id: checkbox.id, label: checkbox.label, value },
                        ...state.checkboxes.slice(index+1),
                      ],
                    };
                  })
                }
                value={checkbox.value}
                key={checkbox.id}
              />
            </View>
          ))}
      </View>
    );
  }
}