react native ios平臺上textAlignVertical屬性不起作用

itzilong發表於2020-10-30

為了實現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:{
            }
        }),
    }

 

相關文章