[英]how to create a radio button section with a data table in react native?
我想在本机反应中创建这样的页面,但是我不知道如何使用类似于以下代码的数据来实现单选按钮。 关于我如何 go 的想法 在此处输入图像描述
我的数据看起来像这样,首先有一个选项标题,然后是要选择的单选按钮。 为了简单起见,我想创建一个带有标题和单选按钮的部分,以及我在这样的表格中获取它们的数据
const products = [ { id: 1, title: 'Boisson', data: [ { label: 'Coca Cola', price: '500 KMF', }, { label: 'Fanta', price: '250 KMF', }, { label: 'Sprite', price: '200 KMF', }, ] }, { id: 2, title: 'Boisson', data: [ { label: 'Coca Cola', price: '500 KMF', }, { label: 'Fanta', price: '250 KMF', }, { label: 'Sprite', price: '200 KMF', }, ] }, ];
谢谢你的帮助
您可以使用react-native-paper
单选按钮检查我的示例:
import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import { RadioButton } from 'react-native-paper';
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',
},
]
},
];
export default class DrinkSelector extends Component {
checkDrink(drink, object) {
var i;
for (i = 0; i < object.length; i++) {
if (object[i].isChecked === 'checked') {
object[i].isChecked = 'unchecked';
}
}
drink.isChecked = "checked";
this.setState({ refresh: true });
}
render() {
return (
<View style={{ flex: 1, padding: 20, backgroundColor: "#f2f2f2" }}>
{products.map((object, d) =>
<View key={d} style={{ justifyContent: 'space-between' }}>
<Text style={{ fontSize: 18, marginBottom: 20 }}>{object.title}</Text>
{object.data.map((drink, i) =>
<View key={i} style={styles.drinkCard}>
<RadioButton value={drink.price} status={drink.isChecked} onPress={() => this.checkDrink(drink, object.data)} />
<Text style={{ fontSize: 20, paddingLeft: 10 }}>{drink.label}</Text>
</View>
)}
</View>
)}
</View>
)
}
}
const styles = StyleSheet.create({
drinkCard: {
paddingLeft: 6,
alignItems: 'center',
flexDirection: 'row',
marginBottom: 16,
backgroundColor: 'white',
height: 55,
elevation: 1,
borderRadius: 4,
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.