如何在本機反應中創建帶有數據表的單選按鈕部分？

Question

我想在本機反應中創建這樣的頁面，但是我不知道如何使用類似於以下代碼的數據來實現單選按鈕。 關於我如何 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', }, ] }, ];

謝謝你的幫助

Answer 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,
  }
})