如何在 react-native Text 中设计带有装饰线的文本答案

【问题标题】：How to design a text with decoration line in react-native Text如何在 react-native Text 中设计带有装饰线的文本
【发布时间】：2019-08-29 12:53:32
【问题描述】：

我需要在文本和装饰线之间添加一些空间。有人对此有什么建议吗？

我已经设置了文本装饰线，但它没有在文本和装饰线之间显示空间。

如下图所示

另外，我设置了 boderBottom 宽度。全屏显示

【问题讨论】：

请提供minimal reproducible example
React-Native: How to increase space between text and underline的可能重复
但这对我不起作用

标签： react-native react-native-text

【解决方案1】：

很遗憾，您无法单独使用Text 指定下划线边框和文本之间的间距。但是你可以用View包裹它。

<View style={{ alignSelf: 'flex-start', borderBottomColor: 'black', borderBottomWidth: 1 }}>
    <Text style={{ fontSize: 12, lineHeight: 30 }}>
      {'Lorem Ipsum dolor Siamet'}
    </Text>
</View>

只需更改 line-height 即可指定空间。这是输出

【讨论】：

文本结束后显示行长很长
您能详细说明一下吗？ @sejn
参考这张图片。我需要仅针对文本而不是设备宽度显示borderBottomline。 i.stack.imgur.com/UhIhp.png
你能显示你使用的完整代码吗？这可能与您如何包装上面的示例代码有关。尝试将父视图样式设置为alignItems 或justifyContent 并避免flex: 1
找到了问题，我更新了答案，只需将alignSelf: 'flex-start' 添加到您的<View /> 样式即可解决您的问题。看到这个截图imgur.com/W1neB4g@sejn

【解决方案2】：

添加视图并为视图留出边距并为视图添加边框。

<View style={{borderWidth:1,bordercolor:"Black",marginBottom:2}}>
<Text style={{fontSize:12}>28.Aug 2019</Text>
</View>

【讨论】：

【解决方案3】：

这里有一个简单的解决方法来解决文本边框贯穿整个屏幕宽度的问题。用flexDirection:"row" 将其包裹在View 中。

<View style={{
        flexDirection:"row"
      }}>
        <Text
        style={{
          borderBottomWidth:1,
          paddingBottom:3

        }}
        >
        My Text
        </Text>

      </View>

https://snack.expo.io/@ammarahmed/grounded-watermelon

要使其在 android 和 ios 上运行，请使用以下方法。您需要使用TextInput 才能使其工作。不管你想写什么，写在value中，并将editable设置为false

<View style={{
            flexDirection:"row"

          }}>
            <TextInput
            style={{
              borderBottomWidth:1,
              paddingBottom:3,
              borderBottomColor:"black",
            }}
            editable={false}
            value="My Text"
            />

          </View>

【讨论】：

我已经更新了适用于 IOS 和 Android 的修复程序

【解决方案4】：

你也可以使用textDecorationLine

<Text style={{ fontSize: 18, textDecorationLine: 'underline' }}>28.Aug 2019</Text>

看点心：https://snack.expo.dev/@abranhe/textdecorationline

【讨论】：