Javascript react native中有2列

我尝试制作包含按钮的两列，我尝试使用flex方向的“行”，但发生了这种情况

应该是这样的

<View>
    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>

    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>
<View>

还有别的办法吗

var行=[]，列=[]；
var i=0；
按钮。forEach（（e，idx）=>{
推（e）；
i++；
if（i==2 | | idx==buttons.length-1）{
i=0；
柱推(
{rows}
);
行=[]；
i=0；
}
});
返回(
{columns}
);您可以为此使用
平面列表

以下是如何获得2x2网格显示，您需要调整它以适应您的按钮

<FlatList
  data={[1, 2, 3, 4]}
  numColumns={2}
  renderItem={() => (
    <View style={{ 
      flex: 1,
      height: 150,
      borderWidth: 1,
      margin: 20
    }}/>
  )}
/>

(
)}
/>

这将输出黑盒，但应该足以让您继续。
您可以为此使用
平面列表

以下是如何获得2x2网格显示，您需要调整它以适应您的按钮

<FlatList
  data={[1, 2, 3, 4]}
  numColumns={2}
  renderItem={() => (
    <View style={{ 
      flex: 1,
      height: 150,
      borderWidth: 1,
      margin: 20
    }}/>
  )}
/>

(
)}
/>

这将输出黑框，但应该足以让您继续操作。
您可以将其设置为如下样式：

<View>
  <View style={{flexDirection:'row'}}>
   <Button1View/> // Break
   <Button2View/> // Meeting
  </View>
  <View style={{flexDirection:'row'}}>
   <Button3View/> // on the way
   <Button4View/> // office
  </View>
</View>


//中断
//会合
//途中
//办公室

您可以相应地在视图和按钮中添加样式，但这将按照您的需要排列按钮
您可以按如下方式设置样式：

<View>
  <View style={{flexDirection:'row'}}>
   <Button1View/> // Break
   <Button2View/> // Meeting
  </View>
  <View style={{flexDirection:'row'}}>
   <Button3View/> // on the way
   <Button4View/> // office
  </View>
</View>

You can use **GRID** component 
<Grid
    renderItem={() => (
        <View style={{ 
          flex: 1,
          height: xx,
          borderWidth: 1,
          margin: xx
        }}/>
      )}
    data={[arrayData]}
    itemsPerRow={2}
/>
Please check this documentation.


//中断
//会合
//途中
//办公室

您可以相应地在视图和按钮中添加样式，但这将按照您的需要排列按钮
您可以使用**网格**组件
You can use **GRID** component 
<Grid
    renderItem={() => (
        <View style={{ 
          flex: 1,
          height: xx,
          borderWidth: 1,
          margin: xx
        }}/>
      )}
    data={[arrayData]}
    itemsPerRow={2}
/>
Please check this documentation.

(
)}
数据={[arrayData]}
itemsPerRow={2}
/>
请检查此文档。

您可以使用**网格**组件
(
)}
数据={[arrayData]}
itemsPerRow={2}
/>
请检查此文档。

我曾经通过使用
flexDirection
和给定内容的高度和宽度来解决这个问题

上面的问题可以这样解决

<View>
    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>

    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>
<View>

我曾经通过使用
flexDirection
和给定内容的高度和宽度来解决这个问题

上面的问题可以这样解决

<View>
    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>

    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>
<View>


所以我在api中按下了我的按钮，我不想硬编码，我该怎么做？你的意思是说你的网格安排将是动态的？你不会事先知道如何安排图像？所以我从api按下按钮，我不想硬编码，我该怎么做？你的意思是说你的网格安排将是动态的？你不会事先知道如何安排图像？我从api得到我的按钮，我不想像这样硬编码，有没有这样做？我从api得到我的按钮，我不想像这样硬编码，有没有这样做？