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

2018-03-05  本文已影响0人  wp_nine

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

猜你喜欢

热点阅读