Question

让我们说<View>像这样：

<View>
    <Text h4 style={{color: theme.colors.success}}>Heading</Text>
    <Text>Normal text</Text>
    <Text style={{color: theme.colors.warning}}>Warning text</Text>
</View>

我需要<View>的每个孩子都在该视图中居中。

我尝试将style={{textAlign: 'center'}}添加到父项<View>，但是它不起作用。

如何做到这一点，而不是手动将style={{textAlign: 'center'}}添加到每个子组件？

Answer 1

使元素垂直居中。

<View style={{flex:1,justifyContent:'center'}}>
  ...
</View>

将元素水平居中

<View style={{flex:1,alignItems:'center'}}>
  ...
</View>

在水平和垂直方向上居中。

<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
  ...
</View>

我添加了flex:1以便扩展屏幕。您还可以设置固定的width,height

请注意，在React Native中，默认情况下所有元素都是按列方式放置的。它与web相反。

Answer 2

尝试一下

<View style = {{flex : 1, justifyContent : 'center',alignContent : 'center', alignItems:'center'}}>
    <Text h4 style={{color: theme.colors.success}}>Heading</Text>
    <Text>Normal text</Text>
    <Text style={{color: theme.colors.warning}}>Warning text</Text>
</View>

React Native的样式继承

2 个答案: