如何在 react native web 中使用 align Items="center"、justify Content="center" 和 position="absolute"答案

【问题标题】：How to use alignItems="center", justifyContent="center" and position="absolute" in react native web如何在 react native web 中使用 align Items="center"、justify Content="center" 和 position="absolute"
【发布时间】：2021-04-01 14:17:15
【问题描述】：

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

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

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

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

谁能帮帮我

【问题讨论】：

标签： styles react-native-web

【解决方案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' 应该始终在视图中（按水平对齐但仅在文本中）

【讨论】：

我知道 alignItems 和 justifyContent 的含义。但是你有没有在网站上测试过你的代码。在第一次构建中，alignItems="center"、justifyContent="center" 和 position="absolute" 样式已从原始样式中删除。我想知道为什么会这样。
“从原始样式中移除”是什么意思