Как установить флажок, когда в React Native есть массив?

Question

Я хочу получить проверенных друзей, используя флажок. Но я не совсем уверен, как мне этого добиться, надеюсь, мне кто-нибудь поможет.

Это мой штат:

state = {checked: false}

Здесь я хочу отобразить массив

{this.props.navigation.getParam('friends').map((name, key) => (
<View>
  <Text>{name}</Text>
  <CheckBox 
    checked={this.state.checked}
    onPress={(val)=>{}}
  />
</View>))}

Примечание: Или может кто-нибудь написать мне фрагмент приложения / кода в snack.expo.io, как получить только отмеченное значение флажка

Answer 1

Вы можете написать собственный компонент флажок

    export default class CustomCheckbox extends Component {
      constructor(props) {
        super(props);
        this.state = {
          checked: false,
        };
      }
      toggleChange(){
        this.setState({checked: !this.state.checked});
      }
      render() {
        return (
         <View>
      <Text>{this.props.name}</Text>
      <CheckBox 
        checked={this.state.checked}
        onPress={() =>  this.bind.toggleChange(this)}
      />
    </View>
        );
      }
    }

и импортируйте ваш компонент CustomCheckbox

    import CustomCheckbox from "your CustomCheckbox.js path"

    {this.props.navigation.getParam('friends').map((name, key) => (
    <View>
      <CustomCheckbox name={name} />
    </View>
    ))}

Answer 2

Ваш код довольно хорош, вам просто нужно немного обновить. У вас есть два варианта:

В массиве вашего друга должен быть проверен ключ в каждом содержащем объект, тогда вы можете просто сделать что-то вроде этого.

{
this.props.navigation.getParam('friends').map((item, key) => (
let {name, checked} = item // item is an object from friends array,the  and it have name, checked and other keys
<View>
  <Text>{name}</Text>
  <CheckBox 
    checked={checked}
    onPress={(val)=>{}}
  />
</View>))
}

Другое - сохранить имя человека в качестве ключа и true / false в качестве проверенного состояния, например:

toggleCurrentFirendState = (item)=>{
   this.setState((prevState)=>{
       let {name} = item  //get name from clicked friend from the list
       return {
           ...prevState,  //used spread operator, so that other states doesn't get mutat.
          [name]:!prevState[name] //toogle state of clicked item
       }
   })
}

//within your render
{
this.props.navigation.getParam('friends').map((item, key) => (
let {name} = item // item is an object from friends array,the  and it have name, checked and other keys
<View>
  <Text>{name}</Text>
  <CheckBox 
    checked={name ===this.state[name]}  //see change
    onPress={(val)=>{this.toggleCurrentFirendState(item)}}
  />
</View>))
}