logo标签列表

在React Native中（使用NativeBase），文本如何垂直对齐？

textreact-nativevertical-alignmentnative-base
93

我在想是否有办法在React Native中垂直对齐。我试图将其定位在底部，但我认为我找不到一个好的方法来实现。

如果有人知道如何解决这个问题，请告诉我。

12个回答
96

您可以使用flex属性，justifyContent来实现此目的。完整文档在此处。

<View style={{justifyContent: 'center'}}>
   <Text>Vertically Centered Text</Text>
</View>
我认为这是最佳方案，因为 Text 组件存在一些限制。当然，您需要调整 justifyContent 和 alignItems 来获得最佳结果。 - Wiston Coronell
94

要使任何内容（包括文本）水平和垂直对齐，只需在包含它的容器中使用以下代码：

    container :{
       justifyContent: 'center', //Centered vertically
       alignItems: 'center', //Centered horizontally
       flex:1
    }
5
评论似乎有些混淆，对我来说alignItems是垂直居中，而justifyContent是水平居中。 - Francislainy Campos
6
默认情况下，React Native 的 flexDirection 是列（column）方向，与 Web 不同。所以 justifyContent 属性将使内容在垂直方向上居中。 - martin
把水平和垂直的混淆纠正过来，你就得到了最好的答案。 - BaptisteB
40
你可以使用仅适用于 Android 的样式属性 textAlignVertical。
要将文本对齐到顶部:
style={{textAlignVertical: 'top'}}

将文本居中对齐：

style={{textAlignVertical: 'center'}}

将文本底部对齐：

style={{textAlignVertical: 'bottom'}}
17
textAlignVertical 是一个仅适用于安卓系统的样式属性。如果你在开发 iOS 应用，可以尝试使用 flexbox 的对齐属性 alignItems: center 代替。参见 textAlignVertical is not valid。 - Top-Master
我建议你不要使用这个。选择跨平台可行的解决方案。 - Sigex
13

特别是在使用图像或图标时，会出现这种问题。我曾经有过同样的问题，我的解决方案：

 <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
   <Icon type="MaterialCommunityIcons" name="barcode" />
   <Text style={{ textAlign: 'center' }}>{urun_data.barkod}</Text>
</View>
11

我曾经遇到过类似的问题并查看了这里的许多其他帖子。这是对我有用的方法。

我创建了一个初始视图，并在该视图中嵌套了我想要垂直居中的元素。我犯了一个错误，就是在初始视图中包含了"flex:1"，这会导致垂直对齐出现问题。

代码：

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
  <Text>Content here to be vertically aligned</Text>
  <Switch>...</Switch>
</View>
我认为您不需要 flexDirection: 'row'。默认的 flex 方向已经是行了。此外，您可能想要将 flex: 1 添加到 View 中，以便它覆盖整个视图高度。 - aaronmbmorse
5

现在，RN版本 >= 0.55.2已支持"textAlignVertical"。

<TextInput
    style={styles.text}
    onChangeText={text => console.log('text >>>>>>>', text)}
    value='sample text'
 />

text: {
  textAlign: 'center',
  textAlignVertical: 'center',
}

处理同时使用 flex: 1 和设置<Text>组件的height属性。

3
flex: 1让子视图占据父视图中所有剩余的空间。因此，请确保父视图占据了它应该占据的空间。
我建议将您的内容包装在<SafeAreaView>标签中，以便根据设备调整内容。但您也可以使用任何其他视图类型。
 <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     <Text>Centered Text</Text>
 </SafeAreaView>
  • flex: 1 属性使视图填满它所在的父元素的全部宽度和高度。
  • justifyContent: 'center' 属性可以将子组件在垂直方向上居中对齐。
  • alignItems: 'center' 属性可以将子组件在水平方向上居中对齐。

你也可以在

3

文本垂直居中对齐总结

情况1：视图下只有一个文本 iOS：使用flex和alignItems/justifyContent更加居中， ADR:高度=行高，includeFontPadding:false更加居中。

情况2：同一行视图下有两个文本，且两个文本字体不同，较小字号的文本不需要使用高度属性。

较大字号的文本使用上述方法进行对齐。较小字号的文本可以使用字体大小，但不能使用行高和高度属性。在这种情况下，两个文本都可以居中对齐。

情况3：同一行视图下有两个文本，且两个文本字体不同，较小字号的文本必须使用高度属性。

较大字号的文本使用上述方法进行对齐，而较小字号的文本则使用填充和includeFontPadding的高度属性来实现对齐。

演示

<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24
        }}
    >
        测试
    </Text>
    <Text
        style={{
            fontSize: 24,
            lineHeight: 36,
            height: 36,
            includeFontPadding: false
        }}
    >
        测试
    </Text>
</View>
<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24
        }}
    >
        ios设备
    </Text>
    <Text
        style={{
            fontSize: 16
        }}
    >
        更对齐
    </Text>
</View>
<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24,
            lineHeight: 36,
            height: 36,
            includeFontPadding: false
        }}
    >
        安卓
    </Text>
    <Text
        style={{
            fontSize: 12,
            height: 18,
            includeFontPadding: false,
            paddingVertical: 2,
            paddingHorizontal: 1,
            paddingTop: DeviceInfo.isIOS ? 3 : 2,
        }}
    >
        更对齐
    </Text>
</View>
1
只需使用 alignItems 进行垂直对齐。
alignItems: 'flex-start' //for start the View : vertical-align: top
alignItems: 'flex-end' // for vertical-align: bottom
alignItems: 'center' // for vertical-align: middle

<View style={{ flexDirection: 'row', alignItems: 'flex-start'}}>
<View>  <Text>hello 1</Text> </View>
<View>  <Text>hello 2</Text> </View>
</View>

通过更改alignItems属性来查看此示例

1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接