如何在本机反应中添加文本删除线？

Posted 2023-02-22

【中文标题】如何在本机反应中添加文本删除线？

【英文标题】：How to add strike through on Text in react native?

【发布时间】：2018-01-31 16:29:46

【问题描述】：

嘿，我想添加 10 美元的删除线以显示削减金额。请检查以下内容：

<View style=styles.row>
    <View style=styles.inputWrapstotal>
        <Text style=styles.labelcolor>16.7% Off</Text>
    </View>
    <View style=styles.inputWrapstotal>
        <Text style=styles.labelamount>Rs $10</Text>
        <Text style=styles.labelamountchange> 12 </Text>
    </View>
</View>

请添加 css 以便我可以在一行中对齐两个文本，在此先感谢。

请查看图片

【参考方案1】：

与：

<Text style=textDecorationLine: 'line-through', textDecorationStyle: 'solid'>
  Solid line-through
</Text>

【参考方案2】：

<Text style= textDecorationLine: 'line-through' >Strike through text</Text>

您可以从官方文档here中找到更多的文本样式选项

【参考方案3】：

您可以将textDecorationLine 与'line-through' 属性一起使用，如下所示：

<Text style= textDecorationLine: 'line-through' >$12</Text>

它会在你的文字上划一条线！

【参考方案4】：

那么你想实现这个权利吗？

<Text style=styles.oldPrice>$19.19</Text>

只需将此样式传递给文本组件

const styles = StyleSheet.create(
  oldPrice: 
    textDecorationLine: 'line-through',
    textDecorationStyle: 'solid',
  ,
);