با آموزش کار با State در React Native از وب سایت آموزش برنامه نویسی سورس باران در خدمت شما کاربران عزیز هستیم. در جلسه چهارم آموزش React Native به بررسی State یا وضعیت در React Native و تفاوت بین State و props در React Native خواهیم پرداخت.
آموزش کار با State در React Native
داده ها در داخل React Components توسط State و props اداره می شوند. در این فصل، ما درباره State صحبت خواهیم کرد. State تغییرپذیر است در حالیکه props غیر قابل تغییر است. این بدان معنی است که در آینده می توان State را به روز کرد در حالی که props را نمی توان آپدیت کرد. در ادامه آموزش React Native با ما همراه باشید….
آموزش استفاده از State
این مولفه اصلی ماست. ما فقط وارد Home می شویم که در اکثر فصل ها استفاده شده است.
App.js
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { state = { myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' } render() { return ( <View> <Text> {this.state.myState} </Text> </View> ); } }
ما می توانیم شبیه ساز متن یا emulator text را از state در اسکرین شات تصویر زیر مشاهده کنید.
آموزش بروزرسانی State
از آنجا که State قابل تغییر است، ما می توانیم آن را با ایجاد تابع deleteState به روز کنیم و با استفاده از رویداد onPress = {this.deleteText} فراخوانی کنیم.
Home.js
import React, { Component } from 'react' import { Text, View } from 'react-native' class Home extends Component { state = { myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' } updateState = () ⇒ this.setState({ myState: 'The state is updated' }) render() { return ( <View> <Text onPress = {this.updateState}> {this.state.myState} </Text> </View> ); } } export default Home;
در تمام فصل ها، ما از کلاس syntax برای وضعیت کامل (container) کامپوننت ها و تابع Syntax برای بدون وضعیت (presentational) کامپوننت ها استفاده می کنیم.ما در مورد کامپوننت ها در فصل بعدی بیش تر صحبت می کنیم.
ما همچنین نحوه استفاده از arrow function syntax برای updateState را یاد خواهیم گرفت. شما باید در نظر داشته باشید که این syntax از lexical scope استفاده می کند و این کلمه کلیدی با environment یا (Class) محدود می شود. که این گاهی منجر به رفتار غیرمنتظره خواهد شد.
روش دیگر برای تعریف متد ها استفاده از توابع EC5 است، اما در این صورت ما باید این را به صورت دستی در کامپوننت قرار دهیم. مثال زیر را با هم می بینیم.
class Home extends Component { constructor() { super() this.updateState = this.updateState.bind(this) } updateState() { // } render() { // } }
مثالی دیگر از آموزش State ها در react native
برای کنترل یک کامپوننت دو نوع داده وجود داره state و props. اگر داده های ما در حال تغییر هستن باید از state استفاده کنیم. برای معرفی state باید اونو داخل سازنده ها مقدار دهی کنیم و هر وقت بخواهیم اون مقدارو تغییر بدیم از دستور setstate استفاده میکنیم. در ویدئو زیر هم توضیحات کاملی در مورد state ها دادم. در مثال زیر میخواهیم با زدن دکمه , متن title تغییر پیدا کنه به Hello world ؟
1- برای شروع react و دو کامپوننت Text , View را داخل فایل app.js اضافه میکنیم:
import React, { Component } from 'react'; import { View, Text ,Button} from 'react-native';
2- سپس یک کلاس با نام App تعریف می کنیم:
export default class App extends Component { render() { return ( ); } }
3- حالا نوبت به تعریف state رسیده. برای این کار یک سازنده ایجاد کرده و در آن یک state با نام title تعریف میکنیم: برای تعریف state از کلمه کلیدی {this.state={name of state:value استفاده میکنیم .
export default class App extends Component { constructor(props){ super(props); this.state={ title:'Home page' } } render() { return ( ); } }
4- حالا نوبت به تعریف دو کامپوننت Text , Button رسیده:
<View> <Text> {this.state.title} </Text> <Button title="click" onPress={()=>this.setState({title:' Hello world '})}/> </View>
5- در کامپوننت Button یک پراپ title برای مشخص کردن نام دکمه و یک پراپ onPress برای زمانی که روی دکمه کلیک شد میگه چه عملی انجام بده که در اینجا گفتیم با استفاده از setState مقدار title رو برابر عبارت Hello world بزارید.
سورس کد برنامه در فایل App.js
import React, { Component } from 'react'; import { View, Text ,Button} from 'react-native'; export default class App extends Component { constructor(props){ super(props); this.state={ title:'Home page' } } render() { return ( <View> <Text> {this.state.title} </Text> <Button title="click" onPress={()=>this.setState({title:'Hello world'})}/> </View> ); } }
لیست جلسات قبل آموزش React Native
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۱۳ آذر ۱۳۹۸
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس