[React-native] ActivityIndicator 사용해보기

[주의] 이 글은 제가 공부하는 내용을 기억하려고 쓴 글입니다. 설명이 빈약할 수 있습니다.

 

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C

React Native로 날씨앱 만들기 - 인프런

위 링크의 강의를 보면서, 배운 것, 추가적으로 해본 것들을 정리해본 글입니다.

 

 

ActivityIndicator?

https://reactnative.dev/docs/activityindicator

React Native · A framework for building native apps using React

Displays a circular loading indicator.

여기 튜토리얼에서는 위의 문장처럼 설명되어 있습니다. 한마디로, 원형의 로딩 표시를 보여준다고 하는 것 같습니다.

바로 이렇게 말이죠.

ActivityIndicator Example

위 동영상처럼 ActivityIndicator를 사용하는 방법은 간단합니다. 

아래 코드처럼 ActivityIndicator를 import 해주고 <ActivityIndicator/>를 추가하면됩니다.

 

	import React from 'react';
	import { StyleSheet, Text, View,ActivityIndicator} from 'react-native';
	export default function App() {
	return (
	<View style={styles.container}>
	<ActivityIndicator/>
	<Text style = {styles.text1}> Test Msg</Text>
	</View>
	);
	}
	const styles = StyleSheet.create({
	container: {
	flex: 1,
	backgroundColor: '#fff',
	alignItems: 'center',
	justifyContent: 'center',
	},
	text1: {
	color: '#000',
	}
	});

view raw App.js hosted with ❤ by GitHub

 

그럼 한번 이 ActivityIndicator를 가지고 놀아볼까요?

먼저 크기부터 바꾸어보겠습니다.

 

 

ActivityIndicator 크기 조절

 

ActivityIndicator Size Example

 

위 동영상처럼 한번 3개의 ActivityIndicator를 사용해봤습니다.

위에서부터, size가 large, small , 지정안함 순입니다.

이를 통해, size를 지정안하면 기본적으로 small로 지정된다는 것을 알 수 있습니다.

그리고 추가적으로 style에 height를 부여하였는데, 표시되는 원이 커지는 것이 아니라 Indicator가 차지하는 영역만 늘어난다는 것을 알 수 있습니다.

 

 

사용한 코드는 다음과 같습니다.

	import React from 'react';
	import { StyleSheet, Text, View,ActivityIndicator} from 'react-native';
	export default function App() {
	return (
	<View style={styles.container}>
	<ActivityIndicator size = "large"/>
	<ActivityIndicator size = "small"/>
	<ActivityIndicator style = {{height: 100}}/>
	<Text style = {styles.text1}> Test Msg</Text>
	</View>
	);
	}
	const styles = StyleSheet.create({
	container: {
	flex: 1,
	backgroundColor: '#fff',
	alignItems: 'center',
	justifyContent: 'center',
	},
	text1: {
	color: '#000',
	}
	});

view raw App.js hosted with ❤ by GitHub

 

 

ActivityIndicator 색상 변경

이제 한번 색상을 바꾸어보겠습니다.

 

 

 

위 사이즈 조절한 코드에서 색상을 추가해보았습니다.

코드를 건드려보면서 기억할 만한 것은 색상코드, 색상 단어로 색상이 지정 가능하다.

style 속성 안에 들어가있는 color는 적용되지 않는다.(한번 동영상과 코드로 살펴보시면 될 것 같습니다.)

 

 

사용한 코드는 다음과 같습니다.

	import React from 'react';
	import { StyleSheet, Text, View,ActivityIndicator} from 'react-native';
	export default function App() {
	return (
	<View style={styles.container}>
	<ActivityIndicator size = "large" color = "#000"/>
	<ActivityIndicator size = "small" color = "red"/>
	<ActivityIndicator style = {{height: 100, color: "blue"}} color = "pink"/>
	<Text style = {styles.text1}> Test Msg</Text>
	</View>
	);
	}
	const styles = StyleSheet.create({
	container: {
	flex: 1,
	backgroundColor: '#fff',
	alignItems: 'center',
	justifyContent: 'center',
	},
	text1: {
	color: '#000',
	}
	});

view raw App.js hosted with ❤ by GitHub