一个产品有多个 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>
))}
...
)
但它们在移动屏幕上看起来像这样=>: horizontally
我的问题是如何将它们垂直渲染成这样:
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;
先谢谢你,
答案 0 :(得分:0)
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>
这应该可以解决您的问题