关于react-nativeText组件水平垂直居中问题

hzxOnlineOk

已于 2022-10-08 09:00:45 修改

阅读量1.6k

点赞数 1

分类专栏： react-native 文章标签： javascript 前端开发语言

于 2020-08-03 19:52:49 首次发布

原文链接：https://www.jianshu.com/p/6d89af2f8f07

版权

react-native 专栏收录该内容

95 篇文章 2 订阅

订阅专栏

Text 垂直居中问题

Text 能否作为flex容器

Text fontFamily是否支持多个值

Text 垂直居中问题

最近发现 React Native (以下称RN)里，<Text> 的 文字垂直居中 ，有很多小问题，有必要总结一下。

提前说明下，这里使用的 RN 版本是： 0.57

通常在 web/html/css 开发中，单行文字 垂直居中，一般都可以通过 height == lineHeight 来实现。但是在 RN 里，出来的效果连差强人意都还差点，明显的上下间距不同，更别说 Text 嵌套的居中了。

Text 能否作为flex容器

在搜索 Text 垂直居中的过程中，发现有些文章里，在 Text 上使用了 justifyContent: center 这样的属性。这个属性应该是用在 flex容器 上面的，所以在demo里，测试了下 Text 能否通过 display: flex 升级为 flex容器。实验证明，Text 不能作为 flex容器，因此，使用 justifyContent 应该也是没有作用的。

Text fontFamily是否支持多个值

Text的字体 fontFamily，也和 web 上有较大区别。web上可以在css中给fontFamily设置多个值，包括各种备选方案；但是在 RN里，fontFamily 只支持一个值 ，不能设置多个！

Text支持的style

通过官方文档text#style，有几个样式会涉及到文本的垂直居中：lineHeight includeFontPadding textAlignVertical。其中，includeFontPadding 和 textAlignVertical 只支持 android 系统。

android系统支持的 includeFontPadding和textAlignVertical，如果Text上设置了lineHeight，那么前面两个样式将不生效！

单行文字垂直居中

单行文字垂直居中，应该是最简单的情况。比如 height: 26, fontSize: 20，来测试各种样式的组合情况。

具体测试demo，在这个expo上：https://snack.expo.io/@rrdfe/text-vertical-center-case

直接和web一样，通过 height == lineHeight 来垂直居中，android下文字会偏下，ios上，文字会偏上。

根据测试demo，目前要实现比较理想的效果，基本只能用 View嵌套Text，通过 flex 布局来垂直居中，比如这样写：

const styles = {
    con: {
        height: 26,
        flexDirection: 'column',
        justifyContent: 'center',
    },
    text: {
        fontSize: 20,
        //不写下面两个，Android系统上文字会偏下
        includeFontPadding: false,
        textAlignVertical: 'center',    
    }
};

//later in render
<View style={styles.con}>
    <Text style={styles.text}>文字内容</Text>
</View>