如何在React Native中使文本变为粗体,斜体或下划线?

时间:2018-05-27 22:06:15

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

令人惊讶的是,在Stack Overflow上没有一个问题可以将这些组合在一起。关于斜体或强调的SO没有答案,事实上,只有this question表示粗体。我在下面自我回答了这个问题。

5 个答案:

答案 0 :(得分:13)

<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

答案 1 :(得分:7)

<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
},

答案 2 :(得分:6)

仅一种解决方案

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

答案 3 :(得分:3)

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

例如...

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

答案 4 :(得分:2)

仅使用

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

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

其他装饰有:

  1. 下划线
  2. 直通
  3. 下划线下划线