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

【问题标题】：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 以便我可以在一行中对齐两个文本，在此先感谢。

请查看图片

【问题讨论】：

标签： android css reactjs react-native

【解决方案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',
  },
});

【讨论】：