Native reagieren - Text

In diesem Kapitel werden wir darüber sprechen Text Komponente in React Native.

Diese Komponente kann verschachtelt sein und Eigenschaften von übergeordnet zu untergeordnet erben. Dies kann in vielerlei Hinsicht nützlich sein. Wir zeigen Ihnen ein Beispiel für die Großschreibung des ersten Buchstabens, das Stylen von Wörtern oder Textteilen usw.

Schritt 1: Datei erstellen

Die Datei, die wir erstellen werden, ist text_example.js

Schritt 2: App.js.

In diesem Schritt erstellen wir einfach einen einfachen Container.

App.js.

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

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

Schritt 3: Text

In diesem Schritt verwenden wir das Vererbungsmuster. styles.text wird auf alle angewendet Text Komponenten.

Sie können auch feststellen, wie wir für einige Textteile andere Stileigenschaften festlegen. Es ist wichtig zu wissen, dass allen untergeordneten Elementen übergeordnete Stile übergeben werden.

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

Sie erhalten folgende Ausgabe: