美文网首页
关于react-native text 水平垂直居中问题

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

作者: wp_nine | 来源:发表于2018-03-05 11:38 被阅读0次

为了实现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:{
            }
        }),
    }

相关文章

  • css居中方式总结(亲测有效)

    水平居中(行内元素水平居中、块级元素水平居中) 垂直居中 水平垂直居中 行内元素水平居中 text-align: ...

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

    为了实现text文本居中,原本在android 上开发以下的css样式是ok的 但在ios上只有水平居中,没有垂直...

  • css 常见的元素居中方式

    元素居中分为水平居中和垂直居中两种。 一、水平居中 text-align .container {text-ali...

  • css分享

    一、水平垂直居中: 1、水平居中: ① text-align:center若是行内元素, 给其父元素设置 text...

  • CSS 踩坑笔记

    居中 1. 文字居中 水平居中: text-align: center 垂直居中: vertical-align:...

  • CSS居中的几种方式

    1.水平居中的 margin:0 auto; 2.水平居中 text-align:center; 3.水平垂直居中...

  • 浮动与定位02

    水平居中与垂直居中 水平居中 text-align:center 单行文本居中 单行文本和a链接 padding:...

  • 复合场景的居中的几种实现方式

    知识点:复合元素居中,分为水平居中和垂直居中。 1、水平居中 (1) text-align: center;适用范...

  • css 图片居中

    css图片居中(水平居中和垂直居中) css图片水平居中 块状元素直接用text-align:center, di...

  • 【Android基本功】Pain.drawText 实现文字垂直

    平时我们在自定义View经常会遇到text的绘制,经常会需要文字水平居中,垂直居中,水平居中比较简单,而垂直居中稍...

网友评论

      本文标题:关于react-native text 水平垂直居中问题

      本文链接:https://www.haomeiwen.com/subject/kracfftx.html