آموزش Text در برنامه نویسی ریکت نیتیو

3 سال پیش

آموزش Text در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Text در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

مولفه Text می تواند تو در تو باشد و می تواند خصوصیاتی را از والدین به فرزند به ارث برساند. این می تواند از بسیاری جهات مفید باشد. ما مثالی از بزرگ نوشتن حرف اول، فرم دهی کلمات یا قسمت هایی از متن و … را به شما نشان خواهیم داد.

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

فایلی که ما می خواهیم ایجاد کنیم text_example.js است

مرحله ۲: App.js

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

App.js

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

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

مرحله ۳: پیام کوتاه

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

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

React Native Text

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

نویسنده مطلب erfan molaei

آموزش Text در برنامه نویسی ریکت نیتیو

آموزش Text در برنامه نویسی ریکت نیتیو

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

مرحله ۲: App.js

App.js

مرحله ۳: پیام کوتاه

text_example.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

آموزش Text در برنامه نویسی ریکت نیتیو

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

مرحله ۲: App.js

App.js

مرحله ۳: پیام کوتاه

text_example.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه