React Native:列表的元素粘在一起?

Question

我有一个问题:我的列表元素没有分散开来，我不明白为什么。每个字母有3个元素，它们应该分开。我认为这可能与这些元素是列表中的数组有关。下面是截图:https://i.stack.imgur.com/Tbbvi.jpg

下面是我的代码:

<View style={{ flex: 15, backgroundColor: "red" }}>
<Text style={[styles.texte201, { marginTop: 50, marginLeft: 80 }]}>
Glossaire
</Text>
<View
style={{
flex: 1,
backgroundColor: "snow",
flexDirection: "row",
shadowColor: "#000000",
shadowOpacity: 0.2,
shadowRadius: 10,
marginLeft: 80,
marginRight: 80,
justifyContent: "center",
alignItems: "center",
marginTop: 30,
}}
>
{letter.map((letter) => {
if (letter.data.length >= 1) {
return (
<View>
<Text
style={{
fontSize: 20,
fontWeight: "600",
marginLeft: 15,
marginRight: 15,
}}
>
{letter.name}
</Text>
</View>
);
} else {
return (
<View>
<Text
style={{
color: "grey",
fontSize: 20,
fontWeight: "600",
marginLeft: 15,
marginRight: 15,
}}
>
{letter.name}
</Text>
</View>
);
}
})}
</View>
<View style={{ flex: 10, backgroundColor: "green" }}>
{letter.map((letter) => {
if (letter.data.length >= 1) {
return (
<View
style={{
flex: 1,
backgroundColor: "blue",
flexDirection: "row",
}}
>
<Text
style={{
fontSize: 90,
fontWeight: "200",
marginLeft: 15,
marginRight: 15,
}}
>
{letter.name}
</Text>
<Text
style={{
fontSize: 18,
fontWeight: "600",
marginTop: 25,
width: "50%",
}}
>
{letter.data}
{"n"}
</Text>
<Text style={{ marginTop: 50, width: "50%" }}>
{letter.description}
{"n"}
</Text>
</View>
);
}
})}
</View>
</View>

下面是我的列表代码:

const letter = [
{
id: "1",
name: "A",
data: ["Abricot", "Abricot", "Abricot"],
description: [
"Un abricot est un fruit",
"Un abricot est un fruit",
"Un abricot est un fruit",
],
},
{
id: "2",
name: "B",
data: ["Branche", "Branche", "Branche"],
description: [
"Une branche vient d'un arbre",
"Une branche vient d'un arbre",
"Une branche vient d'un arbre",
],
},
{
id: "3",
name: "C",
data: [],
},
{
id: "4",
name: "D",
data: ["Dalle", "Dalle", "Dalle"],
description: [
"Une dalle de pierre",
"Une dalle de pierre",
"Une dalle de pierre",
],
},
{
id: "5",
name: "E",
data: [],
},
{
id: "6",
name: "F",
data: [],
},
{
id: "7",
name: "G",
data: [],
},
{
id: "8",
name: "H",
data: [],
},
{
id: "9",
name: "I",
data: [],
},
{
id: "10",
name: "J",
data: [],
},
{
id: "11",
name: "K",
data: [],
},
{
id: "12",
name: "L",
data: [],
},
{
id: "13",
name: "M",
data: [],
},
{
id: "14",
name: "N",
data: [],
},
{
id: "15",
name: "O",
data: [],
},
{
id: "16",
name: "P",
data: [],
},
{
id: "17",
name: "Q",
data: [],
},
{
id: "18",
name: "R",
data: [],
},
{
id: "19",
name: "S",
data: [],
},
{
id: "20",
name: "T",
data: [],
},
{
id: "21",
name: "U",
data: [],
},
{
id: "22",
name: "V",
data: [],
},
{
id: "23",
name: "W",
data: [],
},
{
id: "24",
name: "X",
data: [],
},
{
id: "25",
name: "Y",
data: [],
},
{
id: "26",
name: "Z",
data: [],
},
];

如果你需要，这是我的风格:

texte201: {
color: "#424242",
fontSize: 25,
fontWeight: "600",
},

Answer 1

尝试替换{letter.data}使用以下

letter.data.map((item) =>  {
return (
<Text style={{marginLeft: 15, marginRight: 15}}>
{item}
</Text>
)
})