React-Native:如何增加文本和下划线之间的空间 [英] React-Native: How to increase space between text and underline

问题描述

我遵循的风格:

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

并将我的内容的下划线创建到一些 Text 组件中.不过好像这个下划线和用它修饰的文字太接近了.

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?

感谢您的帮助！

推荐答案

1. 将您的 Text 包裹在一个 View 中，该视图的样式包含 borderBottomWidth: 1 或您想要的任何厚度.

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

给你的 Text 一个 lineHeight 来调整边框和内容之间的间距.如果您有多行文本，则使用 paddingBottom 也可以.

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.

就这么简单.请记住，View 边框将拉伸以包含 View 本身的任何填充.

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

这篇关于React-Native:如何增加文本和下划线之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！