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

【问题标题】：React-Native: How to increase space between text and underlineReact-Native：如何增加文本和下划线之间的空间
【发布时间】：2017-11-24 12:54:58
【问题描述】：

我遵循的风格：

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

它为我的内容创建下划线到一些文本组件中。但是这个下划线似乎和用它装饰的文字太接近了。

我可以通过某种方式增加这个距离吗？

感谢您的帮助！

【问题讨论】：

How to increase the gap between text and underlining in CSS的可能重复
没有。这都是关于 react-native 的。

标签： javascript react-native

【解决方案1】：

将Text 包裹在View 中，该View 的样式包含borderBottomWidth: 1 或任何您想要的粗细。
给你的Text 一个lineHeight 来调整边框和内容之间的间距。如果您有多行文本，那么使用paddingBottom 也可以。

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

【讨论】：

你能用任何例子给出任何风格
你知道怎么减少吗？

【解决方案2】：

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

链接here

但是有一个解决方法。

在要调整下划线的 Text 上创建 react View 包装器。然后将 borderBottomWidth 添加到 View 并调整下划线与 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.
    }
});

将 viewStyle 添加到您的 parentView。

希望有帮助！

【讨论】：

【解决方案3】：

据我所知，最好的方法是在<Text> 之后添加<View />（不包含内容），并按照您希望的下划线给出顶部边框。

例如：

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

记住：如果您的Text 的父级具有flexDirection: 'column'（这是默认值），这将起作用。但如果它有flexDirection: 'row'，则将Text 和View（即下划线）都包裹在另一个视图中，如<View>...</View>，这样这些项目将排列在一个列中。

【讨论】：

【解决方案4】：

如何在 react-native 中在文本和装饰线之间留出空间。参考附图

1 带有底部边框宽度，2 是装饰线

【讨论】：