反应原生的 2 列答案

【问题标题】：2 columns in react native反应原生的 2 列
【发布时间】：2020-02-15 08:33:49
【问题描述】：

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

应该是这样的

还有其他方法吗？

var rows = [], columns = [];
var i = 0;

buttons.forEach((e, idx) => {
    rows.push(e);
    i++;

    if (i === 2 || idx === buttons.length - 1) {
        i = 0;
        columns.push(
            <View key={ idx } style = {{ flex: 1, flexDirection: 'row' }}>
                { rows }
            </View>
        );
        rows = [];
        i = 0;
    }
});

return (
    <View style = {{ flex: 1, margin: normalize(20) }} >
        { columns }
    </View>
);

【问题讨论】：

标签： javascript reactjs react-native flexbox

【解决方案1】：

我曾经使用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 得到的，我不想像这样硬编码，有什么办法吗？

【解决方案2】：

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.

react-native-grid-component

【讨论】：

【解决方案3】：

你可以像下面这样设置它：

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

您可以相应地在视图和按钮中添加样式，但这会按照您的意愿排列按钮

【讨论】：

所以我从 api 按下按钮，我不想硬编码，我该怎么做？
你的意思是说你的网格排列是动态的？您不会事先知道如何安排图像？

【解决方案4】：

您可以为此使用FlatList。

这是获得 2x2 网格显示的方法，您需要对其进行调整以适应您的按钮。

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

这将输出黑框，但应该足以让你继续。

【讨论】：