如何在React Native中正确实现单选按钮部分？

Question

你好，我是本机反应的新手，我有一个问题要尝试创建带有多个带有单选按钮的部分的组件选项。例如，在您选择交付应用程序的菜单的订购选项上。我能够使用以常量声明的数据创建单选按钮，唯一的问题是我无法确保我们可以检查每个部分中的值。这意味着在所有部分中，我只能检查一个值。那不是我真正想要的。我把我的代码放在下面。我想在每个部分中检索选定的值并将其存储在变量中，数组将是很好的，我不知道该怎么做。

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 
const products = [
  {
    id: 1,
    title: 'Soft Drinks',
    data: [
      {
        label: 'Coca Cola',
        price: '500 KMF',
      },
      {
        label: 'Fanta',
        price: '250 KMF',
      },
      {
        label: 'Sprite',
        price: '200 KMF',
      },
    ],
  },
  {
    id: 2,
    title: 'Juices',
    data: [
      {
        label: 'Mango',
        price: '500 KMF',
      },
      {
        label: 'Orange',
        price: '250 KMF',
      },
      {
        label: 'Strawberry',
        price: '200 KMF',
      },
    ],
  },
];
 
class RadioButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: [],
    };
  }
 
  radioClick(label) {
    this.setState({
      selectedValue: [label]
    })
  }
 
  render() {
 
    console.log(this.state.selectedValue)
 
    return (
      <View>
        {products.map((object, d) => (
          <View key={products.id} style={styles.sectionContainer}>
            <Text style={styles.sectionTitle}>{object.title}</Text>
            {object.data.map((item, i) => (
              <View>
                <TouchableOpacity
                  key={item.label}
                  onPress={this.radioClick.bind(this, item.label)}
                  style={styles.radio}>
                  <View style={styles.radioContainer}>
                    {item.label == this.state.selectedValue ? (
                      <View style={styles.activeButton} />
                    ) : null}
                  </View>
                  <Text style={styles.label}>{item.label}</Text>
                  <Text style={styles.price}>+ {item.price}</Text>
                </TouchableOpacity>
              </View>
            ))}
          </View>
        ))}
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  sectionContainer: {
    paddingHorizontal: 20,
    paddingVertical: 5,
    backgroundColor: 'rgba(0,0,0,0.06)',
  },
  sectionTitle: {
    letterSpacing: 2,
    fontWeight: '500',
    color: '#737372',
    fontSize: 14,
  },
  radio: {
    flexDirection: 'row',
    paddingHorizontal: 15,
    paddingVertical: 12,
    alignItems: 'center',
    position: 'relative',
  },
  radioContainer: {
    height: 20,
    width: 20,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  activeButton: {
    height: 12,
    width: 12,
    borderRadius: 6,
    backgroundColor: '#000',
  },
  label: {
    marginHorizontal: 10,
    fontSize: 18,
    fontWeight: '500',
    letterSpacing: 1.5,
  },
  price: {
    fontSize: 17,
    fontWeight: '500',
    letterSpacing: 1.5,
    textAlign: 'right',
    color: '#737372',
    position: 'absolute',
    right: 15,
  },
});
 
export default RadioButton;

Radio Button Image