如何在本機反應中正確實現單選按鈕部分？

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