React-Native：如何增加文本和下划线之间的空间

Question

I have followed styles:

const styles = StyleSheet.create({
    title: {
        textDecorationLine: 'underline',
        textDecorationStyle: 'solid',
        textDecorationColor: '#000'
    }
});

and it creates the underline for my content into some Text component. But it seems that this underline is too close to the text decorated with it.

Can I increase this distance in some how?

Thank you for helping!

Answer 1

1. Wrap your Text in a View that has a style containing borderBottomWidth: 1 or whatever you want the thickness to be.

2. Give your Text a lineHeight to adjust the spacing between the border and the content. If you have multiple lines of text, then using paddingBottom would also work.

Simple as that really. Bear in mind the View border will stretch to include any padding on the View itself.

Answer 2

As of now that is not possible in React Native, cause it is also not supported in web apps ie Css.

Link here

But there is a work around to this.

Create react View wrapper over the Text you want to adjust the underline. And then add borderBottomWidth to View and adjust the distance of underline from Text paddingBottom .

const styles = StyleSheet.create({

    viewStyle : {
      borderBottomWidth: 10, // whatever width you want of underline
   }
    title: {
        paddingBottom: 4, // Adjust the distance from your text view.
    }
});

Add the viewStyle to your parentView .

Hope that helps!

Answer 3

According to me, the best possible way to do this is to add a <View /> (without content) after the <Text> and give top-border as you want your underline to be.

For example:

<Text style={{ color: 'blue' }}>Categories</Text>
<View style={{ 
    height: 0,               // height is '0' so that the view will not occupy space
    width: 100,              // as much as you want to 'Stretch' the underline
    borderTopColor: 'blue', 
    borderTopWidth: 2,       // 'Thickness' of the underline
    marginTop: 15 .          // 'Gap' between the content & the underline 
}} />

REMEMBER: This will work if the parent of your Text has flexDirection: 'column' (which is default value). But if it has flexDirection: 'row' , wrap both the Text & View (ie underline) in another view like <View>...</View> so the items will be arranged in a column.

Answer 4

How to give space between text and decoration line in react-native. Refer the attached image

1 with bottom border width and 2 is decoration line