Question

我一直在通过使用所需的flex创建空的View组件来为flexbox设置边距，但是我想知道是否有一种方法可以更优雅地做到这一点。这是我一直在做的事情：

const MyComponent = () => (
  <View style={{ flex: 1, justifyContent: 'space-around', alignItems: 'center'}}>
    <View style={{ flex: 1 }} />
    <View style={{ flex: 1 }}>
      <Text>My real content here</Text>
    </View>
  </View>
);

看到我只是放在第一个内部视图中，以给出我想要的适当边距。是否有一种优雅的方法（又称正确方法）？

Answer 1

您可以通过将flexbox内容包装在元素中并使用边距将其element应用于html和css来进行包装：

*{
  margin:0;
}
.row-flex{
display:flex;
flex-wrap:wrap;
width:100vw
}
.col{
width:calc(100%/3);
 height:200px;
    margin-top:20px;
}
.content{
background-color:green;
  width:90%;
  margin:0 auto;
  height:100%;
}

<div class="row-flex">
<div class="col">
<div class="content"></div>
  </div>
<div class="col">
<div class="content"></div></div>
<div class="col">
<div class="content"></div></div>
<div class="col">
<div class="content"></div></div>
<div class="col">
<div class="content"></div></div>
</div>
</div>

Answer 2

不确定您为什么真正需要内部视图来设置边距。您可以将边距赋予Textcomponent的父视图。

您可以分享屏幕截图，也许我可以更好地指导您？

const MyComponent = () => (
  <View style={{ flex: 1, justifyContent: 'space-around', alignItems: 'center'}}>
    <View style={{ flex: 1, margin: 20 }}>
      <Text>My real content here</Text>
    </View>
  </View>
);

如何使用FlexBox设置组件的边距？

2 个答案: