React Native - Text

W tym rozdziale omówimy Text składnik w React Native.

Ten składnik może być zagnieżdżony i może dziedziczyć właściwości z rodzica na dziecko. Może to być przydatne na wiele sposobów. Pokażemy Ci przykład wielkiej pierwszej litery, stylizacji słów lub części tekstu itp.

Krok 1: Utwórz plik

Plik, który zamierzamy utworzyć, to text_example.js

Krok 2: App.js

W tym kroku po prostu utworzymy prosty kontener.

App.js

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

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

Krok 3: Tekst

W tym kroku użyjemy wzorca dziedziczenia. styles.text zostanie zastosowana do wszystkich Text składniki.

Możesz również zauważyć, jak przypisujemy inne właściwości stylizacji do niektórych części tekstu. Ważne jest, aby wiedzieć, że wszystkie elementy potomne mają przekazane style nadrzędne.

tekst_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
   }
})

Otrzymasz następujący wynik -