映射时关闭其自己的标记内的每个 3 个按钮<View>

Question

我是react native的新手，我正在为android编写我的第一个大型应用程序。我需要在屏幕上动态呈现按钮，并在它们自己的View标记中关闭每3个按钮，使它们保持在一行中。这就是我试图实现的结构

<View>
<Button />
<Button />
<Button />
</View>
<View>
<Button />
<Button />
<Button />
</View>
<View>
<Button />
<Button />
<Button />
</View>
etc...

在我意识到我需要在视图标签中按3对它们进行分组之前，我编写了如下代码：

render() {
const mappedButtons = reversed_buttons.map((button, i) => {
if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
else {return (<Step key={i} title={button}/>)}
})
return (
<View>
{mappedButtons}
</View>)
}

它工作得很好，但我不知道如何在自己的视图标记中关闭Step标记的每个3。我试图在开始时返回视图的打开标签，每三个按钮返回一次关闭和打开标签，但我得到了错误500。我试着这样做：

render() {
var reversed_buttons = [ ];
var reversed_types = [ ];
for (var i = buttons.length-1; i >= 0; i--) {
reversed_buttons.push(buttons[i]);
reversed_types.push(types[i]);
}
const mappedButtons = reversed_buttons.map((button, i) => {
var y = i%3;
if (i == 0){return(<View>)}
if (i == 2){return(</View><View>)}
if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
else {return (<Step key={i} title={button}/>)}
})
return (
<View>
{mappedButtons}
</View>)
}

也以这种方式：

render() {
const mappedButtons = reversed_buttons.map((button, i) => {
var y = i%3;
if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
else {
if (i == 0){
return (<View><Step key={i} title={button}/>)
}
if (y == 2){
return (</View><View><Step key={i} title={button}/>)
}
}
})
return (
<View>
{mappedButtons}
</View>)
}

但这个东西仍然不想正常工作，在控制台中给了我错误500。

Answer 1

这样就可以了。我首先将较大的数组分解为不超过3的单个数组。然后，我映射这些数组来创建每个组。

const buttons = ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b9', 'b10', 'b11', 'b12', 'b13', 'b14', 'b15', 'b16', 'b17'];
const button_groups = [];
while (buttons.length) {
button_groups.push(buttons.splice(0, 3));
}
const renderButtons = button_groups.map(group => {
const btns = group.map(title => <Button>{title}</Button>);
return <View>{btns}</View>;
})