Учебники

React Native — Текст

Сентябрь 19, 2018

В этой главе мы поговорим о текстовом компоненте в React Native.

Этот компонент может быть вложенным, и он может наследовать свойства от родителя к потомку. Это может быть полезно во многих отношениях. Мы покажем вам пример использования заглавной буквы, стилевого оформления слов или частей текста и т. Д.

Шаг 1: Создать файл

Файл, который мы собираемся создать, это text_example.js

Шаг 2: App.js

На этом шаге мы просто создадим простой контейнер.

App.js 

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

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

Шаг 3: Текст

На этом этапе мы будем использовать шаблон наследования. styles.text будет применен ко всем текстовым компонентам.

Вы также можете заметить, как мы устанавливаем другие свойства стиля для некоторых частей текста. Важно знать, что все дочерние элементы имеют родительские стили, переданные им.

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

Вы получите следующий вывод —

43
Share: