1

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

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

如下图

折断

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

折断

4

4 回答 4

3

不幸的是，您不能Text单独使用来指定下划线边框和文本之间的空间。但是你可以用View.

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

只需更改 line-height 即可指定空间。这是输出 在此处输入图像描述

于 2019-08-29T13:05:33.677 回答
0

添加视图并为视图提供边距并为视图添加边框。

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

于 2019-08-29T13:02:11.890 回答
0

这是一个简单的解决方法，可以解决文本边框贯穿整个屏幕宽度的问题。将其包裹在Viewwith 中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>
于 2019-08-29T15:42:51.097 回答
0

你也可以使用textDecorationLine

<Text style={{ fontSize: 18, textDecorationLine: 'underline' }}>28.Aug 2019</Text>

看点心：https ://snack.expo.dev/@abranhe/textdecorationline

于 2022-03-03T07:50:40.037 回答