Как сделать текст жирным, курсивом или подчеркиванием в React Native?

Question

Удивительно, но пока нет ни одного вопроса, который объединяет их все вместе в Stack Overflow; Там не было ответа на SO для курсива или подчеркивания, на самом деле, только этот вопрос для жирного. Я сам ответил на этот вопрос ниже.

Answer 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

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

Answer 3

использовать только

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

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

Другие украшения:

1. никто
2. подчеркивать
3. Линия, проходящая через
4. подчеркивание сквозной строчки

Answer 4

Только однострочное решение

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

Answer 5

Вы можете увидеть все возможные атрибуты на этой странице https://reactnative.dev/docs/text

например...

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

Answer 6

Приведенный выше ответ также подходит, но если вы хотите изменить текст, а также стиль подчеркивания, вы также можете попробовать это решение.

      <Text style={{borderBottomWidth: 1,
               borderBottomColor: 'red',
               fontStyle:'italic',
               fontWeight:'bold'}}>
      Underlined text with custom text and underline style
</Text>