javascript - react native 中有2列

我正在尝试使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>
);

最佳答案

您可以按照以下方式设置样式：

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

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

关于javascript - react native 中有2列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58449259/