如何在本機反應中添加文本刪除線？

Question

嘿，我想以 10 美元的金額添加 Strike Through 以顯示削減金額。 請檢查以下內容：

<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 以便我可以對齊兩個文本的一行，在此先感謝。

請檢查圖像

Answer 1

與：

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

Answer 2

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

您可以在此處的官方文檔中找到更多文本樣式選項

Answer 3

您可以將textDecorationLine與 'line-through' 屬性一起使用，如下所示：

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

它會在你的文字上放一條線！

Answer 4

所以你想實現這個對嗎？？

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

只需將此樣式傳遞給文本組件

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

Answer 5

 <Text textDecorationLine="line-through" fontSize={12}>${price}</Text>