如何在 React Native 中垂直渲染数据？

Question

一种产品有多种variations ，我想将它们全部呈现在 FlatList 或 SectionList 中：

JSON：

[
    {
       ...
    },
    {
        "id": 2,
        "title": "chicken burger 2",
        "sort": 2,
        "img": "http://127.0.0.1:8000/media/categories/unnamed_tyEgUqN.jpg",
        "price": 2.0,
        "category": {
            "id": 1,
            "title": "sandwiches",
            "img": "http://127.0.0.1:8000/media/categories/original_D3hTuRE.jpg"
        },
        "description": "chicken burger chicken burger chicken burger chicken burger chicken burger chicken burger chicken burger chicken burger chicken burger chick",
        "variations": [
            {
                "id": 1,
                "variation_category": {
                    "id": 1,
                    "title": "add ons",
                    "is_optional": true,
                    "is_selectable": false
                },
                "item": "extra cheese",
                "price": 0.1
            },
            {
                "id": 2,
                "variation_category": {
                    "id": 1,
                    "title": "add ons",
                    "is_optional": true,
                    "is_selectable": false
                },
                "item": "double chicken",
                "price": 0.6
            }
        ]
    }
]

我通过此代码获得了产品的所有变体：

function ProductDetailScreen(props) {
    //api
  const [productsData, setProductsData] = useState([]);
  useEffect(() => {
    loadProductsData();
  }, []);

  const loadProductsData = async () => {
    const response = await productsApi.getProducts();
    setProductsData(response.data);
  };
  const productId = props.route.params.productId;
  const thisProduct = productsData.filter((prod) => prod.id === productId);
const variations = thisProduct.map((product) =>
    product.variations.map((variation) => variation.item)
  );
return (
    
    ...
      {variations &&
    variations.map((variation, index) => (
      <View key={index}>
        <Addons item={variation} />
      </View>
    ))}
...
)

但它们在移动屏幕上看起来像这样 => ：水平

我的问题是如何将它们垂直渲染为如下所示：

extra cheese 0.100
double chicken 0.600

Edit:按要求添加组件：

import React from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
// Config
import colors from "../config/colors";
import MyText from "../config/MyText";
// Icons
import { Feather } from "@expo/vector-icons";

function Addons(props) {
  return (
    <TouchableOpacity onPress={props.onPress} style={styles.card}>
        <Feather name="check-square" size={24} color="black" />
        <MyText padding={10}>{props.item}</MyText>
        <MyText padding={10}>{props.price}</MyText>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    height: 50,
    width: 300,
    backgroundColor: colors.white,
    borderBottomWidth: 1,
    borderBottomColor: colors.disabled,
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "column",
    alignSelf: "center"
  },
});

export default Addons;

先感谢您，

Answer 1

Addons 组件内的主视图应具有以下样式

container: 
{ 
  flex: 1, 
  alignItems: "center", 
  justifyContent: "center", 
  flexDirection: "column", 
},

编辑：下面的代码块，您可以垂直获取行

 <View style={{ flex:1, flexDirection:"column" }}>
   variations.map((variation, index) => (
   <View key={index} style={{ flex:1 }}>
     <Addons item={variation} />
   </View>
</View>

这应该可以解决您的问题