آموزش نشانگر فعالیت در برنامه نویسی ریکت نیتیو

آموزش نشانگر فعالیت در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش نشانگر فعالیت در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

در این درس ما به شما نشان خواهیم داد که چگونه از نشانگر فعالیت در React Native استفاده کنید.

مرحله ۱: برنامه

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

App.js

import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'

const Home = () => {
   return (
      <ActivityIndicatorExample />
   )
}
export default Home

مرحله ۲: ActivityIndicatorExample

ویژگی متحرک سازی یک Boolean است که برای نشان دادن شاخص فعالیت استفاده می شود. حالت دوم شش ثانیه پس از نصب قطعه بسته می شود. این کار با استفاده از تابع ()closeActivityIndicator انجام می شود.

activity_indicator_example.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

class ActivityIndicatorExample extends Component {
   state = { animating: true }
   
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   
   componentDidMount = () => this.closeActivityIndicator()
   render() {
      const animating = this.state.animating
      return (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )
   }
}
export default ActivityIndicatorExample

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

وقتی برنامه را اجرا می کنیم ، لودر را روی صفحه مشاهده خواهیم کرد. بعد از شش ثانیه از بین می رود.

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

1. آموزش برنامه نویسی ریکت نیتیو
2. آموزش تنظیمات محیطی برنامه نویسی ریکت نیتیو
3. آموزش برنامه نویسی ریکت نیتو – برنامه
4. آموزش state در برنامه نویسی ریکت نیتیو 
5. آموزش Props در برنامه نویسی ریکت نیتیو 
6. آموزش استایل دهی در برنامه نویسی ریکت نیتیو
7. آموزش Flexbox در برنامه نویسی ریکت نیتیو
8. آموزش ListView در برنامه نویسی ریکت نیتیو
9. آموزش ورودی متن در برنامه نویسی ریکت نیتیو
10. آموزش ScrollView در برنامه نویسی ریکت نیتیو
11. آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو
12.  آموزش HTTP در برنامه نویسی ریکت نیتیو
13. آموزش کار با دکمه ها در برنامه نویسی ریکت نیتیو
14. آموزش انیمیشن ها در برنامه نویسی ریکت نیتیو
15. آمورش اشکال زدایی در برنامه نویسی ریکت نیتیو
16. آموزش روتر در برنامه نویسی ریکت نیتیو
17. آموزش اجرای IOS در برنامه نویسی ریکت نیتیو
18. آموزش اجرای اندروید در برنامه نویسی ریکت نیتیو
19. آموزش View در برنامه نویسی ریکت نیتیو
20. آموزش WebView در برنامه نویسی ریکت نیتیو
21. آموزش مودال در برنامه نویسی ریکت نیتیو