如何在本机反应中正确实现单选按钮部分？

Question

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

 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;

单选按钮图像

Answer 1

您可以使用 react-native-paper 中的组件 RadioButton

首先，不要忘记将 React Native Paper 导入到您的代码中：

import { RadioButton, Text } from 'react-native-paper';

然后您可以像这样轻松地创建无线电组：

<RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
    <View>
        <Text>First</Text>
        <RadioButton value="first" />
    </View>
    <View>
        <Text>Second</Text>
        <RadioButton value="second" />
    </View>
</RadioButton.Group>

查看文档的更多详细信息： https://callstack.github.io/react-native-paper/radio-button.html