如何在 react native web 中使用 alignItems= "center" ， justifyContent= "center" 和 position= "absolute"

Question

我现在使用react native 0.63.3进行web应用程序开发。

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

<视图样式={{alignItems:"中心"，justifyContent:"中心"，}}>

&

<视图样式={{position:'绝对'}}>

第一个代码、alignItems和justifyContent样式将被删除。因此，我将样式更改为其他值，例如"；柔性端"；，效果很好。

同样，职位风格也不适用于"；绝对"；价值但这种风格的其他价值观运作良好。

谁能帮我

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:"中心"应始终位于视图中(垂直对齐(

Text对齐："中心"应始终位于文本中(水平对齐，但仅在文本中(

alignSelf:"中心"应始终位于视图中(按水平对齐，但仅在文本中对齐(