اضافه کردن Blinking Animation به Text در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری چندین متن با انیمیشن چشمک زن ساده با استفاده از state ها و props ها در react native با استفاده از متد ()setInterval نمایش بدیم.متن های چشمک زن برای توجه کاربر به یک مطلب خاص در موقع گشت و گذار در اپلیکیشن استفاده میشه.میتونید برای آشنایی با انیمیشن ها،دوره کار با انیمیشن ها در react native رو که به طور کامل مباحث مربوط به انیمیشن ها در این دوره آموزش داده شده،مشاهده کنید.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کامپوننت های Text,StyleSheet و View در بلاک import
|
1 |
import { AppRegistry, Text, View, StyleSheet } from 'react-native'; |
3.ایجاد یک کلاس جدید به نام BlinkingClass
|
1 2 3 |
class BlinkingClass extends Component { } |
4.ایجاد سازنده با Props در BlinkingClass
|
1 2 3 4 |
class BlinkingClass extends Component { constructor(props) { } } |
5.تنظیم Props در متد super
|
1 2 3 4 5 |
class BlinkingClass extends Component { constructor(props) { super(props); } } |
6.مشخص کردن state با استفاده از this.state و مشخص کردن نمایش Text با استفاده از showText
|
1 2 3 4 5 6 |
class BlinkingClass extends Component { constructor(props) { super(props); this.state = {showText: true}; } } |
7.ایجاد متد ()setInterval
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class BlinkingClass extends Component { constructor(props) { super(props); this.state = {showText: true}; // Change the state every second or the time given by User. setInterval(() => { this.setState(previousState => { return { showText: !previousState.showText }; }); }, // Define any blinking time. 1000); } } |
8.ایجاد یک شی از نوع let و قرار دادن مقدار این شی با یک Prop به نام text در کلاس BlinkingClass
|
1 2 3 4 5 6 |
render() { let display = this.state.showText ? this.props.text : ' '; return ( ); } |
9.استفاده از کامپوننت Text در BlinkingClass
|
1 2 3 4 5 6 |
render() { let display = this.state.showText ? this.props.text : ' '; return ( <Text style = {{ textAlign: 'center', marginTop : 10 }}> </Text> ); } |
10.تنظیم display به عنوان Prop در کامپوننت Text
|
1 2 3 4 5 6 |
render() { let display = this.state.showText ? this.props.text : ' '; return ( <Text style = {{ textAlign: 'center', marginTop : 10 }}>{display}</Text> ); } |
11.اضافه کردن کامپوننت View به کلاس اصلی
|
1 2 3 |
<View> </View> |
12.ایجاد کامپوننت به نام BlinkingClass و استفاده از Prop text برای نمایش متن چشمک زن
|
1 2 3 4 5 |
<View> <BlinkingClass text='This Is Blinking Text 1' /> <BlinkingClass text='This Is Blinking Text 2' /> <BlinkingClass text='This Is Blinking Text 3' /> </View> |
13.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React, { Component } from 'react'; import { AppRegistry, Text, View, StyleSheet } from 'react-native'; class BlinkingClass extends Component { constructor(props) { super(props); this.state = {showText: true}; // Change the state every second or the time given by User. setInterval(() => { this.setState(previousState => { return { showText: !previousState.showText }; }); }, // Define any blinking time. 1000); } render() { let display = this.state.showText ? this.props.text : ' '; return ( <Text style = {{ textAlign: 'center', marginTop : 10 }}>{display}</Text> ); } } class Myproject extends Component { render() { return ( <View> <BlinkingClass text='This Is Blinking Text 1' /> <BlinkingClass text='This Is Blinking Text 2' /> <BlinkingClass text='This Is Blinking Text 3' /> </View> ); } } AppRegistry.registerComponent('Myproject', () => Myproject); |
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید