Как сделать динамический флажок в React Native

Концепция будет заключаться в использовании массива в состоянии и установке массива состояний с данными, полученными из ответа службы. Флажок недоступен на обеих платформах, поэтому вам придется использовать реактивные нативные элементы. И вы можете использовать функцию карты для отображения флажков из массива и иметь 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>
    );
  }
}