ایجاد Typing Text Animation در React Native
سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری یک Typing Text Animation در React Native ایجاد کنیم.Typing text animation که با Animated Type Writer نیز شناخته میشه به حالتی گفته میشه که شما وقتی type میکنید بصورت real time عبارات نمایش داده میشه(اگه از imo استفاده کرده باشید،متوجه منظورم شدیدحتما).
1.ایمپورت کردن کامپوننت های Platform, StyleSheet, View و Text در پروژه.
|
1 2 3 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text } from 'react-native'; |
2.ایمپورت کردن ماژول PropTypes از کتابخانه prop-types .این کتابخانه در ماژول های خود react native وجود داره و نیازی نیست که شما مجددا نصبش کنید.
|
1 |
import PropTypes from 'prop-types'; |
3.ایجاد یک کلاس به نام AnimatedTypingText .از این کلاس برای متن تایپ شده ما مورد استفاده قرار میگیره.
|
1 2 3 4 5 6 7 |
class AnimatedTypingText extends Component<{}> { } |
4.ایجاد ()constructor برای کلاس AnimatedTypingText .در سازنده ما 3 متغیر از نوع this و 2 متغیر از نوع state داریم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
constructor() { super(); this.index = ; this.timer = -1; this.blinking_cursor = -1; this.state = { text: '', cursor_color: 'transparent' } } |
5.ایجاد یک تابع به نام ()StartAnimatedTyping در کلاس AnimatedTypingText .این تابع عملیات انیمیشن سازی متن تایپ شده رو از index 0 شروع میکنه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
StartAnimatedTyping = () => { clearTimeout( this.timer ); this.timer = -1; if( this.index < this.props.text.length ) { if( this.refs.animatedText ) { this.setState({ text: this.state.text + this.props.text.charAt( this.index ) }, () => { this.index++; this.timer = setTimeout(() => { this.StartAnimatedTyping(); }, this.props.AnimatedTypingDuration); }); } } } |
6.ایجاد یک تابع به نام ()AnimatedblinkingCursor در کلاس AnimatedTypingText .در این تابع ما یک cursor بین رنگ Text و transparent با استفاده از انیمیشن ایجاد میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
AnimatedblinkingCursor = () => { this.blinking_cursor = setInterval(() => { if( this.refs.animatedText ) { if( this.state.cursor_color == 'transparent' ) { this.setState({ cursor_color: this.props.color }); } else { this.setState({ cursor_color: 'transparent' }); } } }, this.props.AnimatedBlinkingCursorDuration); } |
7.ایجاد ()componentDidMount و فراخوانی توابع بالا درون این lifecycle
|
1 2 3 4 5 6 |
componentDidMount() { this.StartAnimatedTyping(); this.AnimatedblinkingCursor(); } |
8.ایجاد ()componentWillUnmout در کلاس AnimatedTypingText و پاک کردن typing text animation timer و blinking cursor
|
1 2 3 4 5 6 7 8 9 10 |
componentWillUnmout() { clearTimeout( this.timer ); this.timer = -1; clearInterval( this.blinking_cursor ); this.blinking_cursor = -1; } |
9.اضافه کردن View در بلاک render’s return در کلاس AnimatedTypingText و قرار دادن دو کامپوننت Text درون View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
render() { return( <View style = {{ alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-start' }}> <Text ref = "animatedText" style = {{ color: this.props.TextColor, fontSize: this.props.AnimatedTextSize, textAlign: 'center' }}> { this.state.text } <Text style = {{ color: this.state.cursor_color }}>|</Text> </Text> </View> ); } |
کد کامل کلاس AnimatedTypingText
|
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
class AnimatedTypingText extends Component<{}> { constructor() { super(); this.index = ; this.timer = -1; this.blinking_cursor = -1; this.state = { text: '', cursor_color: 'transparent' } } StartAnimatedTyping = () => { clearTimeout( this.timer ); this.timer = -1; if( this.index < this.props.text.length ) { if( this.refs.animatedText ) { this.setState({ text: this.state.text + this.props.text.charAt( this.index ) }, () => { this.index++; this.timer = setTimeout(() => { this.StartAnimatedTyping(); }, this.props.AnimatedTypingDuration); }); } } } AnimatedblinkingCursor = () => { this.blinking_cursor = setInterval(() => { if( this.refs.animatedText ) { if( this.state.cursor_color == 'transparent' ) { this.setState({ cursor_color: this.props.color }); } else { this.setState({ cursor_color: 'transparent' }); } } }, this.props.AnimatedBlinkingCursorDuration); } componentDidMount() { this.StartAnimatedTyping(); this.AnimatedblinkingCursor(); } componentWillUnmout() { clearTimeout( this.timer ); this.timer = -1; clearInterval( this.blinking_cursor ); this.blinking_cursor = -1; } render() { return( <View style = {{ alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-start' }}> <Text ref = "animatedText" style = {{ color: this.props.TextColor, fontSize: this.props.AnimatedTextSize, textAlign: 'center' }}> { this.state.text } <Text style = {{ color: this.state.cursor_color }}>|</Text> </Text> </View> ); } } |
10.ایجاد یک object از کلاس AnimatedTypingText درون کلاس App
text:پاس دادن متنی که میخواهید نمایش بدید.
TextColor: تنظیم رنگ متن
AnimatedTextSize: تنظیم سایز فونت متن
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
export default class App extends Component<{}> { render() { return( <View style = { styles.MainContainer }> <AnimatedTypingText text = "Hello Friends, Welcome to reactapp.r, It's been very Good to become one of the best React Native Tutorials Persian Website on Internet." TextColor = "#00E676" AnimatedTextSize = {25} /> </View> ); } } |
11.ایجاد استایل سفارشی
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 10, backgroundColor: '#000', paddingTop: ( Platform.OS === 'ios' ) ? 20 : } }); |
12.ایجاد props سفارشی با استفاده از propTypes
|
1 2 3 4 5 6 7 8 |
AnimatedTypingText.propTypes = { text: PropTypes.string, AnimatedTextSize: PropTypes.number, TextColor: PropTypes.string, AnimatedTypingDuration: PropTypes.number, AnimatedBlinkingCursorDuration: PropTypes.number } |
13.تنظیم مقدار پیشفرض props های ایجاد شده.
|
1 2 3 4 5 6 7 8 |
AnimatedTypingText.defaultProps = { text: "Default Animated Typing Text.", TextColor: "#00E676", AnimatedTextSize: 25, AnimatedTypingDuration: 60, AnimatedBlinkingCursorDuration: 200 } |
14.کد کامل برنامه در فایل App.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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text } from 'react-native'; import PropTypes from 'prop-types'; class AnimatedTypingText extends Component<{}> { constructor() { super(); this.index = ; this.timer = -1; this.blinking_cursor = -1; this.state = { text: '', cursor_color: 'transparent' } } StartAnimatedTyping = () => { clearTimeout( this.timer ); this.timer = -1; if( this.index < this.props.text.length ) { if( this.refs.animatedText ) { this.setState({ text: this.state.text + this.props.text.charAt( this.index ) }, () => { this.index++; this.timer = setTimeout(() => { this.StartAnimatedTyping(); }, this.props.AnimatedTypingDuration); }); } } } AnimatedblinkingCursor = () => { this.blinking_cursor = setInterval(() => { if( this.refs.animatedText ) { if( this.state.cursor_color == 'transparent' ) { this.setState({ cursor_color: this.props.color }); } else { this.setState({ cursor_color: 'transparent' }); } } }, this.props.AnimatedBlinkingCursorDuration); } componentDidMount() { this.StartAnimatedTyping(); this.AnimatedblinkingCursor(); } componentWillUnmout() { clearTimeout( this.timer ); this.timer = -1; clearInterval( this.blinking_cursor ); this.blinking_cursor = -1; } render() { return( <View style = {{ alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-start' }}> <Text ref = "animatedText" style = {{ color: this.props.TextColor, fontSize: this.props.AnimatedTextSize, textAlign: 'center' }}> { this.state.text } <Text style = {{ color: this.state.cursor_color }}>|</Text> </Text> </View> ); } } export default class App extends Component<{}> { render() { return( <View style = { styles.MainContainer }> <AnimatedTypingText text = "Hello Friends, Welcome to ReactNativeCode.com, It's been very Good to become one of the best React Native Tutorials Website on Internet." TextColor = "#00E676" AnimatedTextSize = {25} /> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 10, backgroundColor: '#000', paddingTop: ( Platform.OS === 'ios' ) ? 20 : } }); AnimatedTypingText.propTypes = { text: PropTypes.string, AnimatedTextSize: PropTypes.number, TextColor: PropTypes.string, AnimatedTypingDuration: PropTypes.number, AnimatedBlinkingCursorDuration: PropTypes.number } AnimatedTypingText.defaultProps = { text: "Default Animated Typing Text.", TextColor: "#00E676", AnimatedTextSize: 25, AnimatedTypingDuration: 60, AnimatedBlinkingCursorDuration: 200 } |
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
گاهی اوقات هنگام توسعه برنامه‌ها با React Native، در موقعیتی...
آموزش آرایه در جاوا اسکریپت ( JavaScript)
گاهی اوقات نیاز دازیم تا اطلاعاتی را ذخیره کنیم و...
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
Flipper یک ابزار debugging توسعه داده شده توسط فیسبوک است...
نمایش PDF در react native
pdf یکی از پرکاربردترین و محبوب ترین فرمت های document...
ایجاد Timeline ListView در React Native
کامپوننت Timeline ListView در React Native یکی از محبوب ترین...
آموزش React Navigation 5
react navigation اخیرا نسخه جدید خود یعنی x.5 همراه با...
دیدگاهتان را بنویسید