سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. تا این جا وضعیت یا State و تفاوت بین State و props و کامپوننت Container همچنین کامپوننت Presentational در React Native رو با هم بررسی نمودیم. در ادامه استایل دهی در فریم ورک React Native و انواع استایل دهی مانند کامپوننت Container و Presentational کامپوننت در فریم ورک React Native رو خواهیم داشت.
چند راه برای استایل دهی عناصر در React Native وجود دارد.
شما می توانید از ویژگی style برای اضافه کردن styles inline استفاده کنید. با این حال، این بهترین روش نیست، زیرا این روش کد را سخت می تواند بخواند.
در این فصل، از Stylesheet برای یک طراحی استفاده خواهیم کرد.
در این بخش، فرم کامپوننت Container را از فصل قبلی ما ساده تر می کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import PresentationalComponent from './PresentationalComponent' export default class App extends React.Component { state = { myState: 'This is my state' } render() { return ( <View> <PresentationalComponent myState = {this.state.myState}/> </View> ); } } |
در مثال زیر ما StyleSheet را وارد می کنیم. در پایین فایل، ما StyleSheet را ایجاد می کنیم و آن را به styles ثابت اختصاص می دهیم. توجه داشته باشید که سبک های ما در camelCase هستند و ما از px یا٪ برای یک استایل طراحی استفاده نمی کنیم.
برای اعمال سبک به متن ما باید ویژگی style = {styles.myText} را به عنصر Text اضافه کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React, { Component } from 'react' import { Text, View, StyleSheet } from 'react-native' const PresentationalComponent = (props) => { return ( <View> <Text style = {styles.myState}> {props.myState} </Text> </View> ) } export default PresentationalComponent const styles = StyleSheet.create ({ myState: { marginTop: 20, textAlign: 'center', color: 'blue', fontWeight: 'bold', fontSize: 20 } }) |
وقتی برنامه را اجرا می کنیم، خروجی زیر را دریافت می کنیم.
به این ترتیب استایل دهی در فریم ورک React Native و انواع استایل دهی مانند کامپوننت Container و Presentational کامپوننت در فریم ورک React Native رو هم بیان نمودیم. امیدوارم لذت برده باشین. در ادامه جلسات آموزشی به Flexbox خواهیم پرداخت. موفق باشین.