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

در واقع یک تایمر شمارش معکوس،یک ساعت مجازی است که در حالت برگشت پذیری(معکوس)اجرا می شود.تایمر شمارش معکوس را به احتمال زیاد در بسیاری از اپلیکیشن های موبایل دیده اید که پس از اتمام زمان یک کار خاص را انجام می دهند.در واقع این کار خاص زمانی انجام می شود که شمارش معکوس به صفر رسیده باشد.در React Native ما می توانیم با استفاده از کتابخانه react-native-countdown-component یک تایمر شمارش معکوس بسیار زیبا ایجاد کنیم.در این کتابخانه شما میتوانید خیلی از موارد را به راحتی سفارشی سازی کنید و بر اساس نیاز از ویژگی های این کتابخانه استفاده کنید.

1.دایرکتوری پروژه React Native خودتون رو در Terminal یا command prompt باز کنید و دستور زیر را برای نصب کتابخانه react-native-countdown-component اجرا کنید.

npm install react-native-countdown-component --save

1	npm install react-native-countdown-component --save

2.ایمپورت کامپوننت های StyleSheet, View, Text, Platform و Alert در فایل App.js پروژه.

import React, { Component } from 'react';
 
import { StyleSheet, View, Text, Platform, Alert } from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, View, Text, Platform, Alert } from 'react-native';

3.ایمپورت کامپوننت Countdown از کتابخانه react-native-countdown-component.

import CountDown from 'react-native-countdown-component';

1	import CountDown from 'react-native-countdown-component';

4.ایجاد دو تابع به نام های () onDoneCountdown و ()onPressCountdown.

onDoneCountdown : زمانی فراخوانی می شود که شمارنده به اتمام رسیده باشد.

onPressCountdown :زمانی فراخوانی می شود که کاربر کامپوننت countdown را touch کند.

onDoneCountdown = () => {
 
    Alert.alert("Countdown Finish.");
 
  }
 
  onPressCountdown = () => {
 
    Alert.alert("Countdown Component Press.");
 
  }

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 ها را مشاهده کنید.

تفاوت های بین نسخه 0.49 و 0.48 React Native

 render() {
    return (
      <View style={styles.MainContainer}>
 
        <CountDown
          until={600}
          onFinish={this.onDoneCountdown}
          onPress={this.onPressCountdown}
          size={20}
        />
 
      </View>
    );
  }

render() {

return (

<CountDown

until={600}

onFinish={this.onDoneCountdown}

onPress={this.onPressCountdown}

size={20}

</View>

);

}

6.ایجاد استایل سفارشی.

const styles = StyleSheet.create({
 
  MainContainer: {
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
  }
 
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: (Platform.OS) === 'ios' ? 20 : ,

alignItems: 'center',

justifyContent: 'center',

}

});

7.کد کامل برنامه در فایل App.js

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 : 0,
    alignItems: 'center',
    justifyContent: 'center',
  }
 
});

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 (

<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',

}

});

اسکرین شات:

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ