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

我遵循以下风格：

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

它将我的内容的下划线创建为一些文本组件。但这条下划线似乎太接近用它装饰的文本

我能以某种方式增加这个距离吗

---

谢谢你的帮助

到目前为止，这在React Native中是不可能的，因为它在web应用程序（如Css）中也不受支持

链接

但这方面还有一项工作要做

在要调整下划线的文本上创建reactView包装。然后添加borderBottomWidth以查看和调整下划线与文本填充底部的距离

将视图样式添加到父视图中

希望有帮助

将

文本

包装在

视图

中，该视图的样式包含

borderBottomWidth:1

或任何您想要的厚度

为

文本

a

行高

调整边框和内容之间的间距。如果您有多行文本，那么使用

paddingBottom

也可以

---

就这么简单。请记住，

视图

边框将延伸以包括

视图

本身上的任何填充。

根据我的说法，最好的方法是在

之后添加一个

（无内容），并根据您的下划线设置顶部边框

例如：

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

类别

---

请记住：如果

文本的父级
具有
flexDirection:“列”
（这是默认值），则此操作将起作用。但是，如果它有
flexDirection:“行”
，则将
文本和
视图（即下划线）包装在另一个视图中，如
。
，以便将项目安排在一列中。
如何在文本和装饰行之间留出空间。请参阅所附图片

底边宽，为装饰线


可能与否重复。这都是关于react-native的。你能给出任何样式和示例吗
<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 
}} />