如何在 React Native 中使文本变为粗体、斜体或下划线？答案

【问题标题】：How do I make text bold, italic, or underline in React Native?如何在 React Native 中使文本变为粗体、斜体或下划线？
【发布时间】：2018-11-06 11:46:27
【问题描述】：

令人惊讶的是，在 Stack Overflow 上还没有一个问题可以将这些问题组合在一起。斜体或下划线的SO没有答案，事实上，只有this question粗体。我在下面自己回答了这个问题。

【问题讨论】：

顺便说一句，react-native 文档中明确给出了如何一起执行所有这些操作，那么人们为什么要问一个问题呢？。
@RaviRaj 50 人对此表示赞同，因此人们似乎在这篇文章中找到了价值。 Stackoverflow 旨在快速找到答案，而无需翻阅文档。您认为有什么潜在的不利因素？

标签： react-native react-native-android react-native-ios react-native-text

【解决方案1】：

<Text style={styles.bold}>I'm bold!</Text>
<Text style={styles.italic}>I'm italic!</Text>
<Text style={styles.underline}>I'm underlined!</Text>

const styles = StyleSheet.create({
    bold: {fontWeight: 'bold'},
    italic: {fontStyle: 'italic'},
    underline: {textDecorationLine: 'underline'}
})

Snack 的工作演示：https://snack.expo.io/BJT2ss_y7

【讨论】：

感谢您发布此信息。我将这个想法复制到Stack Overflow en español：¿Cómo pongo negritas, cursiva o subrayado en React Native?

【解决方案2】：

<View style={styles.MainContainer}>
    <Text style={styles.TextStyle}>Example of Underline Text</Text>
</View>

TextStyle: {
    textAlign: 'center',
    fontWeight: 'bold'
    fontStyle: 'italic'
    fontSize: 20,
    textDecorationLine: 'underline',
    //line-through is the trick
},

【讨论】：

非常感谢。 fontstyle 中有一个错字。正确的语法是fontStyle，加上大写的“S”。

【解决方案3】：

只使用

<Text style={styles.textStyle}>I'm Underline!</Text>

const styles = StyleSheet.create({
  textStyle: {
    textDecorationLine: 'underline'
  }
})

其他装饰有：

无
下划线
直通
下划线贯穿

【讨论】：

【解决方案4】：

只有一条线的解决方案

<Text style={{fontStyle: 'italic', fontWeight: 'bold', textDecorationLine: 'underline'}}>Bold, Italic & Underline Text</Text>

【讨论】：

textDecorationLine 帮我搞定！

【解决方案5】：

您可以在此页面中查看所有可能的 att https://reactnative.dev/docs/text

例如...

textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')

【讨论】：