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


سلام دوستان. در این آموزش متنی قصد داریم یاد بگیریم چجوری رنگ ActivityIndicator در React Native رو تغییر بدیم.ActivityIndicator در React Native شبیه ProgressBar در Android است که برای نمایش Loading زمانی که اطلاعات از background گرفته میشود،مورد استفاده قرار میگیرد.توسعه دهندگان میتوانند ActivityIndicator رو شخصی سازی کنند و رنگ و سایز ActivityIndicator رو تغییر بدند.
1.ایمپورت کردن کامپوننت های Platform, StyleSheet, View و ActivityIndicator در پروژه
1 2 3 |
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 مورد استفاده قرار میگیرد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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> ); } |
3.ایجاد استایل سفارشی
1 2 3 4 5 6 7 8 9 10 11 12 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: ( Platform.OS === 'ios' ) ? 20 : , flexDirection: 'row', justifyContent: 'space-around', } }); |
4.کد کامل برنامه در فایل 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 |
import React, { Component } from 'react'; 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 : , flexDirection: 'row', justifyContent: 'space-around', } }); |
5.اسکرین شات در نسخه Ios:
دیدگاهتان را بنویسید