マップするときに<View>タグ内の各3つのボタンを閉じる

Question

私は反応ネイティブで新しく、私はアンドロイドのための私の最初の大きなアプリを書いています。私は画面上でボタンを動的にレンダリングし、それぞれのViewタグで3つを閉じて、それらを1つの行に残す必要があります。私はビュータグ内3でグループにそれらを必要とすることを実現する前に、これは私はこのようなコードを作った私は

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

を達成しようとしているどのような構造である：

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つずつクローズする方法がわからない。私は初めでビューのタグを開き、すべての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>; 
})