我想這樣做,以便根據我的結果(我的資料元素的數量),我可以在我的代碼中添加一定數量的行。例如,如果這個數字是 0=>1row, 1=>1row, 2=>2row,3=>2row, 4=>3row, ...我確實嘗試過,但結果總是在 1 行:
let count = 0;
let reste = 0;
let total = 1;
let same = 0;
...
//I'm doing a map of my data here so this code is used as many time as there is of elements //in my data
if (total !== same) {
return (
<View style={{ width: "40%", marginLeft: 70 }}>
<Text
style={{
fontSize: 18,
fontWeight: "600",
marginTop: 25,
width: "50%",
}}
>
{count }
{(reste = count % 2)}
{(total = (count reste) / 2)}
{letter.data[index]}
{"\n"}
</Text>
<Text style={{ marginTop: 50, width: "50%" }}>
{letter.description[index]}
{"\n"}
</Text>
</View>
);
} else {
return (
<View style={{ flexDirection: "column" }}>
<View style={{ width: "40%", marginLeft: 70 }}>
<Text
style={{
fontSize: 18,
fontWeight: "600",
marginTop: 25,
width: "50%",
}}
>
{count }
{(reste = count % 2)}
{(total = (count reste) / 2)}
{letter.data[index]}
{"\n"}
</Text>
<Text style={{ marginTop: 50, width: "50%" }}>
{letter.description[index]}
{"\n"}
</Text>
</View>
</View>
);
}
有什么解決辦法嗎?我什么也沒找到。
uj5u.com熱心網友回復:
從評論中對我的問題的回答來看,您想要擁有2 columns和n行。
您可以使用FlatListwith numColumnsset to2并且行處理將由組件自動完成。
這是一個最小的示例,其中data是您的資料陣列。為了簡單起見,我洗掉了樣式。
<FlatList
data={data}
numColumns={2}
keyExtractor={(_, index) => index.toString()}
renderItem={({item}) => {
return <View>
<Text>
{letter.description[index]}
</Text>
</View>
}}
/>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/485326.html
