Android 映射时关闭各自标记内的每3个按钮

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

等 在我意识到需要在视图标记中按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>)
}

它工作得很好，但我不知道如何在自己的视图标记中关闭每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>)
}

也就是这样：

 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。

这样就可以了。我首先将较大的数组分解为不超过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>;
})

---

看一看。这与您尝试执行的操作类似。是的，没错，我使用%只将迭代次数设置为3次，而不影响我的迭代器。问题是如何使React原生，以关闭视图标记中的每3个按钮。但无论如何，谢谢你的回复