Как изменить цвет из состояния по его номеру индекса в React Native

Question

Я хочу изменить цвет границы моего cardItem. но когда я нажимаю на него, меняется цвет границы всего cardItem, а не тот, который я выбираю.

Ее мой код:

 selectApp = (index, newSelected) => {
    let newArr = this.state.userData.appearance.split(',');
    newArr = [...this.state.cards];

    newArr[index].selected = newSelected;

    
    this.setState({
      cards: newArr,
      
      bcolor0: 'yellow',
      bwidth0: 3,
    });
  };

CardItem:

 <CardItem
                            button
                            onPress={() =>
                              this.selectApp(index, !item.selected)
                            }
                            cardBody
                            style={{
                              backgroundColor: '#549bc4',
                              borderColor: this.state.bcolor0,
                              borderWidth: this.state.bwidth0,
                              marginRight: 'auto',
                              marginLeft: 'auto',
                            }}>

Answer 1

Ciao, как @Chris G предложил в комментарии, когда вы звоните selectApp, вы устанавливаете bcolor0: 'yellow'. Полагаю, что все ваши CardItem имеют стиль borderColor: this.state.bcolor0,. Итак, когда вы вызываете selectApp, вы устанавливаете для всех карт borderColor желтый цвет.

Чтобы решить эту проблему, вам нужно сделать что-то вроде:

state: {
  ...
  bcolor0: []   // an array of border colors
}
selectApp = (index, newSelected) => {
    let newArr = this.state.userData.appearance.split(',');
    newArr = [...this.state.cards];

    newArr[index].selected = newSelected;

    // here I'm creating an array with the same length of newArr (supposing that you have newArr.length cards to show) 
    let new_boder_color = new Array(newArr.length).fill('white');
    new_boder_color[index] = 'yellow';
    this.setState({
      cards: newArr,
      
      bcolor0: new_boder_color,
      bwidth0: 3,
    });
  };

Затем в вашем CardItem :

<CardItem
                            button
                            onPress={() =>
                              this.selectApp(index, !item.selected)
                            }
                            cardBody
                            style={{
                              backgroundColor: '#549bc4',
                              borderColor: this.state.bcolor0[index],
                              borderWidth: this.state.bwidth0,
                              marginRight: 'auto',
                              marginLeft: 'auto',
                            }}>

Таким образом, вы устанавливаете желтым цветом только borderColor выбранной карты. Я хотел бы быть более точным, но код, который вы опубликовали, не является полным, и написать точный ответ немного сложно.

Answer 2

Я только что сделал это, внеся небольшие изменения в свойство стиля Carditem.

borderColor: item.selected === true? 'фиолетовый': '', borderWidth: item.selected === true? 3: 0,