آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Style ها در React Native-دوره آموزش React Native

دوره های مرتبط با این مقاله

Style ها در React Native

در React Native، برای تعریف style از syntax یا زبان خاصی استفاده نمی کنیم. application را با استفاده از جاوااسکریپت style می دهیم. همه component های اصلی یک prop به نام style دارند. اسامی و مقادیر style معمولا شبیه CSS در وب کار می کند، با این تفاوت که اسامی به صورت camel casing انتخاب می شوند، مثلا backgroundColor (و نه background-color).

Style می تواند یک plain old JavaScript object (POJO) باشد. این ساده ترین و پرکاربرد ترین روش style دادن است. همچنین می توانید آرایه ای از style ها را پاس دهید، آخرین عضو آرایه مقدم تر است، و می توان از این روش برای ارث بری style ها استفاده کرد.

همچنان که یک component پیچیده تر می شود، بهتر است با استفاده از StyleSheet.create چندین style در یک جا تعریف کنیم. مثال زیر را ببینید:



آموزش پروژه محور React Native

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
export default class LotsOfStyles extends Component {
  render() {
    return (
                        < View >
                        < Text style={styles.red} >just red< /Text >
                        < Text style={styles.bigBlue} >just bigBlue< /Text >
                        < Text style={[styles.bigBlue, styles.red]} >bigBlue, then red< /Text >
                        < Text style={[styles.red, styles.bigBlue]} >red, then bigBlue< /Text >
      < /View >
    );
  }
}

یک الگوی رایج این است که component یک style بپذیرد که بعد برای style دادن به کامپوننت child های آن استفاده شود. می توانید با استفاده از این قابلیت به شیوه ی CSS استایل های "cascade" ایجاد کنید.

راه های زیادی برای ایجاد style های سفارشی برای متن ها هست. برای لیست کامل آن می توانید به این لینک مراجعه کنید.

حال می توانید متن های جذابی درست کنید. گام بعد در تسلط به استایل دهی این است که سایز component ها را کنترل کنید.

  • 488
  •    0
  • تاریخ ارسال :   1398/05/28

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .