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

Question

我遵循了风格：

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

它会将我的内容的下划线创建为一些Text组件。但似乎这个下划线与用它装饰的文字太接近了。

我可以在某些方面增加这个距离吗？

感谢您的帮助！

Answer 1

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

2. 让Text lineHeight调整边框与内容之间的间距。如果您有多行文字，那么使用paddingBottom也可以。

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

Answer 2

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

链接here

但是有一项工作要做。

在想要调整下划线的文字上创建反应查看包装。然后将 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 。

希望有所帮助！

Answer 3

我认为，最好的方法是在<View />之后添加<Text>（不包含内容），并根据需要添加边框。

例如：

<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>，以便将项目排列在列中。

Answer 4

如何在本机文本和装饰线之间留出空间。参照所附图片

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