بخش های اصلی

آموزش React Native

React Native – تعریف شیوه نمایش (Styling)

برای استایل دادن به عناصرِ React Native دو روش وجود دارد.

می توانید برای اضافه کردن استایل های درون خطی (inline)، از پراپرتیِ style استفاده کنین. البته این روش، روش خوبی نیست چون باعث می شه که خوانایی کد پایین بیاد.

در این بخش برای استایل دادن از Stylesheet استفاده میکنیم.

کامپوننتِ Container

ابتدا کامپوننتِ container از بخش قبلی را ساده می کنیم.

src/components/myComponent/MyContainerComponent.js

مثال

import React, { Component } from 'react'

import {
   View
} from 'react-native'

import MyPresentationalComponent from './MyPresentationalComponent'

export default class MyContainerComponent extends Component {
   constructor() {
      super()
      this.state = {
         myText: 'Lorem ipsum dolor sit amet.'
      }
   }
   render() {
      return (
         <View>
            <MyPresentationalComponent myText={this.state.myText} />
         </View>
      )
   }
}

کامپوننت نمایشی

در مثال زیر ابتدا Stylesheet را import می کنیم.

در پایین فایل، stylesheet را ایجاد می کنیم و آن را به متغیر ثابتِ (constant) styles تخصیص میدیم. در نظر داشته باشین که استایل ها camelCase هستن و برای استایل دادن از px یا % استفاده نمی کنیم.

برای اعمال استایل ها به متن باید پراپرتیِ style={styles.myText} را به عنصرِ Text اضافه کنیم.

مثال

import React, { Component } from 'react'

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

const MyPresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myText}>
            {props.myText}
         </Text>
      </View>
   )
}

export default MyPresentationalComponent

const styles = StyleSheet.create ({
   myText: {
      marginTop: 50,
      color: 'red',
      fontWeight: 'bold',
      fontSize: 30
   }
})

اگه برنامه را اجرا کنین، خروجی بصورت زیر خواهد بود:

خروجی

react native styling

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد