美文网首页
关于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:{
                }
            }),
        }
    

    相关文章

      网友评论

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

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