آموزش React Native – ساخت اپلیکیشن شمارنده معکوس


در واقع یک تایمر شمارش معکوس،یک ساعت مجازی است که در حالت برگشت پذیری(معکوس)اجرا می شود.تایمر شمارش معکوس را به احتمال زیاد در بسیاری از اپلیکیشن های موبایل دیده اید که پس از اتمام زمان یک کار خاص را انجام می دهند.در واقع این کار خاص زمانی انجام می شود که شمارش معکوس به صفر رسیده باشد.در React Native ما می توانیم با استفاده از کتابخانه react-native-countdown-component یک تایمر شمارش معکوس بسیار زیبا ایجاد کنیم.در این کتابخانه شما میتوانید خیلی از موارد را به راحتی سفارشی سازی کنید و بر اساس نیاز از ویژگی های این کتابخانه استفاده کنید.
1.دایرکتوری پروژه React Native خودتون رو در Terminal یا command prompt باز کنید و دستور زیر را برای نصب کتابخانه react-native-countdown-component اجرا کنید.
1 |
npm install react-native-countdown-component --save |
2.ایمپورت کامپوننت های StyleSheet, View, Text, Platform و Alert در فایل App.js پروژه.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform, Alert } from 'react-native'; |
3.ایمپورت کامپوننت Countdown از کتابخانه react-native-countdown-component.
1 |
import CountDown from 'react-native-countdown-component'; |
4.ایجاد دو تابع به نام های () onDoneCountdown و ()onPressCountdown.
onDoneCountdown : زمانی فراخوانی می شود که شمارنده به اتمام رسیده باشد.
onPressCountdown :زمانی فراخوانی می شود که کاربر کامپوننت countdown را touch کند.
1 2 3 4 5 6 7 8 9 10 11 |
onDoneCountdown = () => { Alert.alert("Countdown Finish."); } onPressCountdown = () => { Alert.alert("Countdown Component Press."); } |
5.تعریف کامپوننت Countdown در بلاک render’s return.
until :در اینجا 600 نشان دهنده 600 ثانیه یعنی 10 دقیقه است.اگر شما بیشتر از 60 دقیقه را به کامپوننت بدهید به طور خودکار آن را تبدیل به ساعت می کند.
onFinish :زمانی فراخوانی می شود که شمارنده به اتمام رسیده باشد.
onPress :زمانی فراخوانی می شود که کاربر کامپوننت countdown را touch کند.
size :سایز کامپوننت countdown را مشخص می کند.
14 نوع مختلف prop در کتابخانه Countdown timer وجود دارد که در صفحه گیت هاب این کتابخانه می توانید این prop ها را مشاهده کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { return ( <View style={styles.MainContainer}> <CountDown until={600} onFinish={this.onDoneCountdown} onPress={this.onPressCountdown} size={20} /> </View> ); } |
6.ایجاد استایل سفارشی.
1 2 3 4 5 6 7 8 9 10 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : , alignItems: 'center', justifyContent: 'center', } }); |
7.کد کامل برنامه در فایل 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 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform, Alert } from 'react-native'; import CountDown from 'react-native-countdown-component'; export default class App extends Component { onDoneCountdown = () => { Alert.alert("Countdown Finish."); } onPressCountdown = () => { Alert.alert("Countdown Component Press."); } render() { return ( <View style={styles.MainContainer}> <CountDown until={600} onFinish={this.onDoneCountdown} onPress={this.onPressCountdown} size={20} /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : , alignItems: 'center', justifyContent: 'center', } }); |
اسکرین شات:
دیدگاهتان را بنویسید