در خدمت شما عزیزان هستیم با آموزش استایل دهی در برنامه نویسی React Native از وب سایت آموزش برنامه نویسی سورس باران. در جلسه ششم آموزش ریکت نیتیو، استایل دهی در فریم ورک React Native و انواع استایل دهی مانند کامپوننت Container و Presentational کامپوننت را خواهیم داشت. با ما همراه باشید….
استایل دهی در React Native
برای استایل دهی در React Native چندین راه وجود دارد. شما می توانید از ویژگی style برای اضافه کردن styles inline استفاده کنید. با این حال، این بهترین روش نیست، زیرا این روش کد را سخت می تواند بخواند. در این فصل، از Stylesheet برای یک طراحی استفاده خواهیم کرد.
کامپوننت Container در ریکت نیتیو
در جلسات قبل هم راجب به کامپوننت Container صحبت و کار شده بود. در این بخش بصورت ساده تر نسبت به جلسات قبل کار می کنیم. به مثال زیر توجه نمایید
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> ); } }
کامپوننت Presentational در ریکت نیتیو
در مثال زیر ما StyleSheet را وارد می کنیم. در پایین فایل، ما StyleSheet را ایجاد می کنیم و آن را به styles ثابت اختصاص می دهیم. توجه داشته باشید که سبک های ما در camelCase هستند و ما از px یا٪ برای یک استایل طراحی استفاده نمی کنیم. برای اعمال سبک به متن ما باید ویژگی style = {styles.myText} را به عنصر Text اضافه کنیم.
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 مورد توجه دوستان و کاربران عزیز قرار گرفته باشد…
لیست جلسات قبل آموزش React Native
- React Native یا ریکت نیتیو چیست؟
- آموزش React Native – نصب و تنظیم محیط React Native
- آموزش App در React Native
- آموزش کار با State در React Native
- آموزش کار با کامپوننت Props در React Native
The post آموزش استایل دهی در برنامه نویسی React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.