React Native - 文本

• 

  简述

  在本章中，我们将讨论TextReact 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
     }
  })
  

  您将收到以下输出 -