Question

我需要在文本和装饰线之间添加一些空间。有人对此有建议吗？

我已经设置了文本装饰线，但是它没有在文本和装饰线之间显示空格。

像下面的图片一样

我还设置了boderBottom宽度。它显示在整个屏幕上

Answer 1

不幸的是，不能单独使用Text来指定下划线边框和文本之间的间隔。但是您可以使用View将其包装起来。

<View style={{ alignSelf: 'flex-start', borderBottomColor: 'black', borderBottomWidth: 1 }}>
    <Text style={{ fontSize: 12, lineHeight: 30 }}>
      {'Lorem Ipsum dolor Siamet'}
    </Text>
</View>

只需更改行高以指定空格。这是输出

Answer 2

添加一个视图并为该视图提供边距，并为该视图添加边框。

<View style={{borderWidth:1,bordercolor:"Black",marginBottom:2}}>
<Text style={{fontSize:12}>28.Aug 2019</Text>
</View>

Answer 3

这里是解决此文本边框遍及整个屏幕宽度的问题的简单解决方法。用View将其包装在flexDirection:"row"中。

<View style={{
        flexDirection:"row"
      }}>
        <Text
        style={{
          borderBottomWidth:1,
          paddingBottom:3

        }}
        >
        My Text
        </Text>

      </View>

https://snack.expo.io/@ammarahmed/grounded-watermelon

要使其在android和ios上运行，请使用以下方法。您需要使用TextInput才能正常工作。无论您想写什么，都可以写在value中，然后将editable设置为false

<View style={{
            flexDirection:"row"

          }}>
            <TextInput
            style={{
              borderBottomWidth:1,
              paddingBottom:3,
              borderBottomColor:"black",
            }}
            editable={false}
            value="My Text"
            />

          </View>

如何在本机文本中使用装饰线设计文本

3 个答案: