关于react-native text 水平垂直居中问题

为了实现text文本居中,原本在android 上开发以下的css样式是ok的

    PaymentTimeStyle:{
        height:36,
        width:100,
        fontSize:14,
        textAlign:'center',
        alignItems:'center',
        justifyContent:'center',
        textAlignVertical:'center',
    }

但在ios上只有水平居中,没有垂直居中,上网查了一下,很多人是通过view嵌套text,但觉得这样麻烦,而且当View的层级越深渲染的速度也会越慢。所以建议还是用以下css属性

        lineHeight:36

但是测试时加上了在android上又显示不正常,无奈下为了不影响android,做了调整,最后的样式代码如下:

import {StyleSheet,Platform} from 'react-native';

PaymentTimeStyle:{
        height:36,
        width:100,
        textAlign:'center',
        alignItems:'center',
        justifyContent:'center',
        textAlignVertical:'center',
        ...Platform.select({
            ios:{
                lineHeight:36,
            },
            android:{
            }
        }),
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,989评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,204评论 3 30
  • 文/一土 头痛,愈演愈烈。我想要用音乐来使自己平静,可是依然头痛。我突然觉得以前那些叫嚷着头痛的日子,在今夜看来,...
    雨下撒哈拉阅读 273评论 0 2
  • 配置服务器 一般来说Mac系统都会自带Apache环境,此命令的用处是查看当前系统的Apache版本 此步骤过后就...
    搬码小能手阅读 481评论 0 2