如何在react-native Text中设计带有装饰线的文字

Question

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

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

喜欢下图

另外，我设置了boderBottom宽度。全屏显示

Answer 1

添加视图并为视图留出边距并为视图添加边框。

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

Answer 2

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

包装它

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

只需更改行高即可指定space。这是输出

Answer 3

这里有一个简单的解决方法来解决文本边框贯穿整个屏幕宽度的问题。用 flexDirection:"row".

将其包裹在 View 中

<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>

Answer 4

您也可以使用textDecorationLine

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

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

如何在react-native Text中设计带有装饰线的文字

How to design a text with decoration line in react-native Text

react-native

react-native-text