如何在本机反应中创建带有数据表的单选按钮部分？答案

【问题标题】：how to create a radio button section with a data table in react native?如何在本机反应中创建带有数据表的单选按钮部分？
【发布时间】：2020-08-11 21:44:24
【问题描述】：

我想在 react native 中创建一个这样的页面，但是我不知道如何使用类似于以下代码的数据来实现单选按钮。一个想法我该怎么做enter image description here

我的数据看起来像这样，首先是选项标题，然后是要选择的单选按钮。为了简单起见，我想创建一个带有标题和单选按钮的部分，以及我在这样的表格中获取它们的数据

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',
          },
        ]
      },
    ];

感谢您的帮助

【问题讨论】：

标签： javascript reactjs react-native radio-button react-native-sectionlist

【解决方案1】：

您可以使用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,
  }
})

【讨论】：