تغییر رنگ ActivityIndicator در react native

سلام دوستان. در این آموزش متنی قصد داریم یاد بگیریم چجوری رنگ ActivityIndicator در React Native رو تغییر بدیم.ActivityIndicator در React Native شبیه ProgressBar در Android است که برای نمایش Loading زمانی که اطلاعات از background گرفته میشود،مورد استفاده قرار میگیرد.توسعه دهندگان میتوانند ActivityIndicator رو شخصی سازی کنند و رنگ و سایز ActivityIndicator رو تغییر بدند.

1.ایمپورت کردن کامپوننت های Platform, StyleSheet, View و ActivityIndicator در پروژه

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

import React, { Component } from 'react';

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

2.ما 6 تا ActivityIndicator با سایزها و رنگ های مختلف در بلاک render’s return اضافه میکنیم

size: این props برای تغییر سایز ActivityIndicator مورد استفاده قرار میگیرد.شما میتونید از small و large استفاده کنید.

color: این props برای تغییر رنگ ActivityIndicator مورد استفاده قرار میگیرد.

render()
    { 
        return(
 
            <View style = { styles.MainContainer }>
 
                <ActivityIndicator size="large" color="#F44336" />
 
                <ActivityIndicator size="small" color="#E91E63" />
 
                <ActivityIndicator size="large" color="#00BCD4" />
 
                <ActivityIndicator size="small" color="#009688" />
                
                <ActivityIndicator size="large" color="#4CAF50" />
 
                <ActivityIndicator size="small" color="#FF9800" />
            
            </View>
            
        );
    }

render()

{

return(

</View>

);

}

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

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

const styles = StyleSheet.create(

{

MainContainer:

{

flex: 1,

justifyContent: 'center',

alignItems: 'center',

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

flexDirection: 'row',

justifyContent: 'space-around',

}

});

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

import React, { Component } from 'react';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/show-add-header-footer-to-listview-in-react-native/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/show-add-header-footer-to-listview-in-react-native-300x162.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">اضافه کردن Header و Footer به ListView</div></div></div><div class="ctaButton"></div></div></a></div> 
import { Platform, StyleSheet, View, ActivityIndicator} from 'react-native';
 
export default class Myapp extends Component<{}>
{
 
    render()
    { 
        return(
 
            <View style = { styles.MainContainer }>
 
                <ActivityIndicator size="large" color="#F44336" />
 
                <ActivityIndicator size="small" color="#E91E63" />
 
                <ActivityIndicator size="large" color="#00BCD4" />
 
                <ActivityIndicator size="small" color="#009688" />
                
                <ActivityIndicator size="large" color="#4CAF50" />
 
                <ActivityIndicator size="small" color="#FF9800" />
            
            </View>
            
        );
    }
}
 
const styles = StyleSheet.create(
{
    MainContainer:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0,
        flexDirection: 'row',
        justifyContent: 'space-around',
    }
});

import React, { Component } from 'react';

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

export default class Myapp extends Component<{}>

{

render()

{

return(

</View>

);

}

const styles = StyleSheet.create(

{

MainContainer:

{

flex: 1,

justifyContent: 'center',

alignItems: 'center',

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

flexDirection: 'row',

justifyContent: 'space-around',

}

});

5.اسکرین شات در نسخه Ios:

تغییر رنگ ActivityIndicator در react native

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

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

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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