Fermer chaque 3 boutons à l'intérieur de leur propre tag <View> lors de la cartographie

Question

Je suis nouveau dans reac-native et j'écris ma première grande application pour Android. J'ai besoin de rendre les boutons dynamiquement à l'écran et de fermer chacun d'entre eux dans leur propre tag View pour les faire rester dans une rangée. C'est la structure que je suis en train de réaliser

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

avant que je réalise que je dois les regrouper par 3 dans la balise vue que j'ai fait le code comme ceci:

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

Il fonctionne très bien, mais je Je ne sais pas comment fermer chaque balise Step-3 dans leur propre balise de vue. Je tentais de revenir balise d'ouverture de vue au début et à la fermeture et l'étiquette d'ouverture chaque troisième bouton, mais je reçois l'erreur 500. je tentais de le faire de cette façon:

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

et aussi de cette façon :

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

mais cette chose ne veut pas encore travailler bien me donner Erreur 500 dans la console.

Answer 1

Cela fera l'affaire. Je décomprime d'abord le tableau le plus grand en tableaux individuels de pas plus de 3. Puis, je cartographie ces tableaux pour créer chaque groupe.

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