۲۹
فروردین

جلسه ۲۶ : کامپوننت Text در React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در این بخش از آموزش ها به کامپوننت Text در React Native خواهیم پرداخت.

کامپوننت Text در React Native

در این فصل، ما در مورد کامپوننت Text در React Native صحبت خواهیم کرد.
این کامپوننت می تواند تو در تو شود و می تواند خواص را از پدر و مادر به فرزند به ارث برساند. این می تواند در بسیاری از موارد مفید باشد. ما نمونه ای از capitalizing یا با حروف بزرگ نوشتن اولین حرف ، استایل کلمات یا بخش های متن و غیره را به شما نشان خواهیم داد.

مرحله ۱: ایجاد فایل

فایل مورد نظر ما text_example.js است

مرحله ۲: App.js

در این مرحله فقط یک container ساده ایجاد می کنیم.

App.js

مثال :

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

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

import React, { Component } from 'react'

import TextExample from './text_example.js'

const App = () => {

return (

)

}

export default App

مرحله ۳: Text

در این مرحله ما از الگوی inheritance یا ارثی استفاده خواهیم کرد. 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
   }
})

import React, { Component } from 'react';

import { View, Text, Image, StyleSheet } from 'react-native'

const TextExample = () => {

return (

</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>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

</Text>

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.

</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

}

})

شما خروجی زیر را دریافت خواهید کرد.

کامپوننت Text در React Native

کلام پایانی

دوستان عزیز سایت پی وی لرن از این که با جلسات آموزشی فریم ورک React Native همراه ما هستید ،متشکریم. همونطور که مشاهده فرمودید در این قسمت از آموزش ها کامپوننت Text در React Native رو مورد بررسی قرار دادیم. در بخش بعدی با کامپوننت Alert همراهتون خواهیم بود.

QR: جلسه ۲۶ : کامپوننت Text در React Native

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۶ : کامپوننت Text در React Native

مقدمه

کامپوننت Text در React Native

App.js

text_example.js

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ