Schließen Sie jeweils 3 Tasten in ihrem eigenen <View> Tag beim Umformen

Question

Ich bin neu in react-native und ich schreibe meine erste große App für Android. Ich muss Schaltflächen auf dem Bildschirm dynamisch rendern und alle 3 davon in einem eigenen Ansichts-Tag schließen, damit sie in einer Zeile bleiben. Dies ist die Struktur, was ich versuche

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

zu erreichen, bevor ich erkannte, dass ich zu einer Gruppe müssen sie um 3 in der Ansicht Tag ich Code wie folgt aus:

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>) 
} 

Es funktioniert gut, aber ich Ich weiß nicht, wie man jeden Step-Tag innerhalb seines eigenen View-Tags schließt. Ich habe versucht, am Anfang öffnende Tag der Ansicht zurückzukehren und Schließen und Öffnen Tag jede dritte Taste, aber ich bin immer Fehler 500. Ich habe versucht, es so zu tun:

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>) 
    } 

und auch auf diese Weise :

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>) 
} 

aber dieses Ding will immer noch nicht funktionieren, mir Fehler 500 in der Konsole geben.

Answer 1

Dies wird den Trick tun. Ich zerlege zuerst das größere Array in einzelne Arrays von nicht mehr als 3. Dann ordne ich diese Arrays zu, um jede Gruppe zu erstellen.

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>; 
})