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

Question

我遵循的风格：

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

并将我的内容创建到某些文本组件中的下划线。但是这个下划线好像和用它装饰的文字太接近了。

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

感谢您的帮助！

原文由 Alex Belets 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1. 将你的 Text 包裹在 View 中，其样式包含 borderBottomWidth: 1 或任何你想要的厚度。

2. 给你的 Text a lineHeight 调整边框和内容之间的间距。如果您有多行文本，那么使用 paddingBottom 也可以。

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

原文由 G0dsquad 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

链接 在这里

但是有一个解决方法。

在要调整下划线的 文本 上创建反应 视图 包装器。然后将 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 。

希望有帮助！

原文由 Prabodh M 发布，翻译遵循 CC BY-SA 3.0 许可协议