苦逼前端

React Native TextInput标签左右对齐的坑

Javascript2016-05-06 19:48

相信大家经常遇到如下设计:

上图授权码处,左边一个Text做label,右边TextInput默认显示placeholder提示用户输入,web端大家都会用flex(inline-block)+line-height来分分钟搞定它,然而到了RN端这个问题却好像没那么简单了:
RN里面的line-height并不是web端的那种效果,并不能通过设置height=lineHeight来使内容居中,具体效果:

机智的开发者们想到了justifyContent: 'center',然而这个属性是View才具有的,没关系text和TextInput一人包一个View:

<View style={styles.textInput}>
    <View style={styles.labelWrap}>
        <Text style={styles.label}>授权码</Text>
    </View>
    <View style={styles.inputWrap}>
        <TextInput
            style={styles.input}
            placeholder="请粘贴您的授权码"
            underlineColorAndroid='rgba(0,0,0,0)'
        />
    </View>
</View>

let styles = StyleSheet.create({
    textInput: {
        marginTop: 50,
        flexDirection: 'row',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderColor: '#ccc'
    },
    labelWrap: {
        height: 40,
        justifyContent: 'center'
    },
    label: {
        fontSize: 14
    },
    inputWrap: {
        height: 40,
        justifyContent: 'center'
    },
    input: {
        height: 40,
        width: 250,
        fontSize: 14
    }
});

然而运行结果并不是想象中的那样:

我们发现,iOS和Android都是input的内容会偏上一点点,针对iOS端的截图进一步放大然后ps测量发现:(mac下截图所以是两倍)
左侧Text:外框高度80px,字体26px,上边距27px,下边距27px
右侧TextInput:外框高度80px,字体26px,上边距28px,下边距26px

明显是Text的锅...等等,来个奇数试试,将外框高度设置为40.5,测量后发现:
左侧Text:外框高度81px,字体26px,上边距26px,下边距29px
右侧TextInput:外框高度81px,字体26px,上边距28px,下边距27px

这突然间TextInput做的要相对好一些了...还有字体,应该28px才对嘛,为什么要比设定的14小1,在尝试了几个其他数字发现,这个数值所对应显示的真实像素,在接近8(16px)的时候是准确的,随着数字的增大误差会越来越大:
2->5px
14->26px
20->37px
25->46px
当然肉眼辨识度可能有问题,权当娱乐了吧 >_<

然后再去看看Text和TextInput本身:分别给两者设置border:

我们发现,好像貌似居中了呢?难道TextInput默认有个border?赶紧把手动给TextInput设置的border去掉,我们发现依然是原来的显示效果,回头想想web端的input才恍然大悟,它一定是存在一个默认的border的。
然后在尝试将TextInput的borderWidth设置为0后发现并没有任何作用,所以只好给左侧的Text设置一个透明border了,问题至此已经解决:

评论(1)
  • 116.90.80.*: 膜拜4年4个月前
还可输入200个字