React Native-텍스트

이 장에서 우리는 Text 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 구성 요소.

텍스트의 일부에 다른 스타일 속성을 설정하는 방법도 알 수 있습니다. 모든 자식 요소에는 부모 스타일이 전달된다는 것을 아는 것이 중요합니다.

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

다음과 같은 출력을 받게됩니다.