如何在Text内含的两个Text之间加上外边距,因为Text是文本布局的,所以margin也没有,那现在该怎么办呢



  • <Text style={styles.bgStyle}>
    <Text style={styles.text1Style}>111</Text>
    <Text style={styles.text2Style}>222</Text>
    </Text>

    bgStyle:{

    },
    reduceStyle: {
        fontSize: 20
    },
    text1Style: {
        color: 'red',
        fontSize: 20,
    },
    text2Style: {
        marginLeft: 10,
        color: 'orange',
        fontSize: 10,
    },


  • 包上view,或者尝试padding



  • @晴明 0_1539659381111_QQ图片20181016110910.png
    我想做成¥和15以及.00底部对齐的效果(上图是采用Text内含三个4个Text布局形成,也是我想要的效果)
    <Text style={[styles.bgStyle].concat(this.props.bgStyle)}>
    <Text style={[styles.reduceStyle].concat(this.props.reduceStyle)}>-</Text>
    <Text style={[styles.logoStyle].concat(this.props.logoStyle)}>
    {'¥'}
    </Text>
    <Text style={[styles.priceStyle].concat(this.props.priceStyle)}>
    {this.props.price}
    </Text>
    <Text style={[styles.decimalsStyle].concat(this.props.decimalsStyle)}>
    {'.00'}
    </Text>
    </Text>

    let styles = StyleSheet.create({
    bgStyle:{
    position: 'absolute',
    left: 100,
    top: 100,
    width: 140,
    height: 30,
    },
    reduceStyle: {
    fontSize: 10,
    color: '#333333',
    },
    logoStyle: {
    fontSize: 10,
    color: '#333333',
    },
    priceStyle: {
    fontSize: 16,
    color: '#333333',
    },
    decimalsStyle: {
    fontSize: 10,
    color: '#333333',
    },
    })
    但是这里问题来了,因为有要求在¥和15之间有宽度为2的间隙,所以我尝试在Text内含的text之间加上margin,padding均失效(文字大小和颜色是有效的),其次我想加空的Text(加上长宽)来做成margin的效果,但是也不起作用了。Text中的内容可以为空格,但是不会有width的效果。
    于是我想抛弃这样的布局,将外层的Text改成View,在bgStyle里面加上flexDirection: 'row',alignItems: 'flex-end',也失败了
    <View style={[styles.bgStyle].concat(this.props.bgStyle)}>
    <Text style={[styles.reduceStyle].concat(this.props.reduceStyle)}>-</Text>
    <Text style={[styles.logoStyle].concat(this.props.logoStyle)}>
    {'¥'}
    </Text>
    <Text style={[styles.priceStyle].concat(this.props.priceStyle)}>
    {this.props.price}
    </Text>
    <Text style={[styles.decimalsStyle].concat(this.props.decimalsStyle)}>
    {'.00'}
    </Text>
    </View>

    let styles = StyleSheet.create({
    bgStyle:{
    position: 'absolute',
    left: 100,
    top: 100,
    flexDirection: 'row',
    alignItems: 'flex-end',
    width: 140,
    height: 30,
    },
    reduceStyle: {
    fontSize: 10,
    color: '#333333',
    height: 19,
    width: 10,
    lineHeight: 20,
    },
    logoStyle: {
    fontSize: 10,
    color: '#333333',
    height: 19,
    width: 20,
    lineHeight: 20,
    },
    priceStyle: {
    fontSize: 16,
    color: '#333333',
    width: 20,
    height: 19,
    lineHeight: 20,
    },
    decimalsStyle: {
    fontSize: 10,
    color: '#333333',
    height: 19,
    width: 20,
    lineHeight: 20,
    },
    })

    上面的方法Text内含的Text之间不能加间隙(可以用Text内容为空来支撑,但是该为空的地方不能加上width),下面的方法底部不能对齐(需要在每一个组件的style里面加上marginBottom或者marginTop来‘手动让其对齐’,但是这样很别扭)。望指教!



  • 另外。text内含的text好像是不支持长宽的(刚测试过,不出意外应该是),可以支持颜色以及字体的大小,外部的text则可以支持所有,好奇怪



  • 现在还有一个问题是如何让text中的文字出现在最底部,我在text包了一层View并将其style写成了justifyContent: 'flex-end',但是text中间的文字仍然没有出现在底部,但是textAligin只有左中右三种,也没有让其在底部的功能!



  • 0_1539671869595_QQ图片20181016143736.png
    这是我包了一层View(包的一层的View都有justifyContent: 'flex-end')之后的效果,因为里面的text文字无法底部对齐,所以



  • 0_1539672740991_ed26e25f-dbb7-4cdd-aedc-bb8fe96e8dc8-image.png 然后发现height和lineHeight的差值好像可以解决,但是治标不治本,这个差值是和字体的大小相关的,不同的地方字体不同导致的高度差也不同,而且这个也明显压缩了View的高度,会有副作用



  • 设置padding:0以及includeFontPadding={false} 试试



  • 试了这两种都不行,对字体大小所引起的底部不能对齐的问题,我只能采取‘委曲求全’的方式,将由文字大小所引起的每个text的底部不对齐的问题采用marginTop或者marginBottom来使它移动对齐,为了避免margin失效,故而只能将text内含text的形式改写成View包含text