如何在React Native Web中使用alignItems =“center”，justifyContent =“center”和position =“absolute”

Question

我现在使用React Native 0.63.3进行Web应用程序开发。

我尝试使用以下代码，但很奇怪。

&

第一个代码，alignItems 和 justifyContent 样式被删除。所以我将样式更改为其他值，例如“flex-end”，效果很好。

仓位风格也不适用于“绝对”价值。但这种风格的其他价值观运作良好。

谁可以帮助我

Answer 1

基本上 justifyContent 用于垂直对齐，alignSelf 用于水平对齐。例如，为了将一个盒子置于一个盒子的中心。你会这样做：

<View style={{width:300,height:100,backgroundColor:'blue',justifyContent:'center'}}>
<View style={{width:50,height:50,backgroundColor:'red',alignSelf:'center'}}
</View>

如果您想水平对齐框（视图）中心的文本，请使用

textAlign:'center'

。所以，总的来说，它看起来像这样=>

<Text style={{textAlign:'center',fontSize:40}}>HELLO WORLD</Text>

如果你想垂直和水平对齐盒子（视图）中心的文本，你需要使用父视图中的 justifyContent 和文本中的 textAlign ，如下 =>

<View style={{height:100,width:100,justifyContent:'center'}}>
<Text style={{fontSize:30,textAlign:'center'}}>HELLO WORLD</Text>
</View>

如果您希望视图彼此重叠而不将视图放入其父视图中，则可以使用绝对/相对。 您主要在图像上使用绝对/相对，但这完全取决于您。

总结：

JustifyContent：“center”应始终位于视图中（垂直对齐）

textAlign：“center”应始终位于文本中（水平对齐，但仅在文本中对齐）

alignSelf：“center”应始终位于视图中（水平对齐，但仅在文本中对齐）

Answer 2

这是 Shanon Daniel，你最好的朋友之一。 现在我正在找你。 你的生日是11月22日吗？ 你还记得4月12日吗？