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

4 سال پیش

امتیاز دهید post

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

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

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

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

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

App.js

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

const Home = () =&gt; {
   return (
      &lt;ActivityIndicatorExample /&gt;
   )
}
export default Home

import React from 'react'

import ActivityIndicatorExample from './activity_indicator_example.js'

const Home = () => {

return (

)

}

export default Home

مرحله 2: 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 = () =&gt; setTimeout(() =&gt; this.setState({
   animating: false }), 60000)
   
   componentDidMount = () =&gt; this.closeActivityIndicator()
   render() {
      const animating = this.state.animating
      return (
         &lt;View style = {styles.container}&gt;
            &lt;ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/&gt;
         &lt;/View&gt;
      )
   }
}
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
   }
})

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 (

<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

}

})

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

React Native Activity Indicator

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

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

App.js

مرحله 2: ActivityIndicatorExample

activity_indicator_example.js

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

دیدگاه شما

بدون دیدگاه

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

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

App.js

مرحله 2: ActivityIndicatorExample

activity_indicator_example.js

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه