React Native - Texte

Dans ce chapitre, nous parlerons de Text composant dans React Native.

Ce composant peut être imbriqué et hériter des propriétés d'un parent à un enfant. Cela peut être utile de plusieurs manières. Nous allons vous montrer un exemple de mise en majuscule de la première lettre, de style de mots ou de parties de texte, etc.

Étape 1: créer un fichier

Le fichier que nous allons créer est text_example.js

Étape 2: App.js

Dans cette étape, nous allons simplement créer un conteneur simple.

App.js

import React, { Component } from 'react'
import TextExample from './text_example.js'

const App = () => {
   return (
      <TextExample/>
   )
}
export default App

Étape 3: Texte

Dans cette étape, nous utiliserons le modèle d'héritage. styles.text sera appliqué à tous Text Composants.

Vous pouvez également remarquer comment nous définissons d'autres propriétés de style sur certaines parties du texte. Il est important de savoir que tous les éléments enfants ont des styles parents qui leur sont transmis.

text_example.js

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'

const TextExample = () => {
   return (
      <View style = {styles.container}>
         <Text style = {styles.text}>
            <Text style = {styles.capitalLetter}>
               L
            </Text>
            
            <Text>
               orem ipsum dolor sit amet, sed do eiusmod.
            </Text>
            
            <Text>
               Ut enim ad <Text style = {styles.wordBold}>minim </Text> veniam,
               quis aliquip ex ea commodo consequat.
            </Text>
            
            <Text style = {styles.italicText}>
               Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
            </Text>
            
            <Text style = {styles.textShadow}>
               Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
               deserunt mollit anim id est laborum.
            </Text>
         </Text>
      
      </View>
   )
}
export default TextExample

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
      marginTop: 100,
      padding: 20
   },
   text: {
      color: '#41cdf4',
   },
   capitalLetter: {
      color: 'red',
      fontSize: 20
   },
   wordBold: {
      fontWeight: 'bold',
      color: 'black'
   },
   italicText: {
      color: '#37859b',
      fontStyle: 'italic'
   },
   textShadow: {
      textShadowColor: 'red',
      textShadowOffset: { width: 2, height: 2 },
      textShadowRadius : 5
   }
})

Vous recevrez la sortie suivante -