Список переключателей не работает в цикле реагировать родной

Question

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

Вот моя функция группы переключателей:

loadCosts(item) {
    var cont = 0;
    var output=[];
    for (var i = 0; i < this.cost_length; i++) {
      var days = item.cost[i].days;
      var cost = item.cost[i].cost;
      var tempItem=  (
        <View key={i} style={{flexDirection:'row'}}>
          <RadioButton value={i} onPress={() => {this.setState({ days:days, price:cost[![enter image description here][1]][1] })}} />
          <Text style={[styles.fontSmall,styles.colorTheme,styles.radioButtonText]}>Cost for {item.cost[i].days} £{item.cost[i].cost}</Text>
        </View>
     );
    output[i] = (tempItem);
   }

    return(
      <RadioButton.Group
        onValueChange={value => this.setState({ value:value })}
        value={this.state.value}
      >
        {output}
      </RadioButton.Group>
    )
  }

Answer 1

Мы также можем решить эту проблему, добавив изображение в качестве переключателя (выбранное или невыбранное изображение) и когда мы нажимаем или щелкаем строку, а затем динамически меняем изображение.

<TouchableOpacity onPress={this.onPress} style={{ flex:1}}>
      <View style={{ flex: 1 }}>
      <View style={ViewStyles.rowContentView}>
      <View style={{ flex: 0.8 }}>{this.props.title}</View>
      <View style={{ flex: 0.1 }} />
      <Image source={this.state.selected ? radioSelectedImage.source : radioImageimage.source} style={image.style} />;
                 {this.renderDetailDisclosure()}
                </View>
            </View>
    </TouchableOpacity>

Answer 2

Использовать карту не для.Для повторов и это все.Вам необходимо вернуть массив компонентов.Замените ваш вывод взамен JSX на карту:

loadCosts(item) {
  return(
    <RadioButton.Group
      onValueChange={value => this.setState({ value:value })}
      value={this.state.value}
    >
     {item.cost.map(({ days, cost }, i) => (
       <View key={i} style={{flexDirection:'row'}}>
         <RadioButton value={i} onPress={() => {this.setState({ days:days, price:cost[![enter image description here][1]][1] })}} />
         <Text style={[styles.fontSmall,styles.colorTheme,styles.radioButtonText]}>`Cost for ${days} £${cost}`</Text>
       </View>
     ))}
    </RadioButton.Group>
  )
}