๊ด€๋ฆฌ ๋ฉ”๋‰ด

yeon's ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป

[React-Native ๊ธฐ์ดˆ ๊ฐ•์˜] ActivityIndicator ๋ณธ๋ฌธ

Computer ๐Ÿ’ป/React

[React-Native ๊ธฐ์ดˆ ๊ฐ•์˜] ActivityIndicator

yeon42 2021. 7. 22. 19:32
728x90
ActivityIndicator

 

์ง€๋‚œ ๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ ์ผ๋ช… '๋กœ๋”ฉ ์ค‘ ...' ์˜ ํ™”๋ฉด์„ ๋„์šฐ๋Š” ์ž‘์—…์„ ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ (๋ฌผ๋ก  ์›นํŽ˜์ด์ง€์˜€์Œ)

๊ทธ๋ƒฅ ์ƒ๊ฐ๋งŒ ํ•˜๊ณ  ์ •์‹ ์ด ์—†์–ด ๊ทธ๊ฒŒ ๋ญ”์ง€ ์ฐพ์•„๋ณด์ง€๋„ ๋ชปํ–ˆ์—ˆ๋‹ค.

๊ทผ๋ฐ ์ด๋ฒˆ ๊ฐ•์˜์—์„œ ๋‚ด๊ฐ€ ๊ถ๊ธˆํ–ˆ์—ˆ๋˜ ๋ฐ”๋กœ ๊ทธ๊ฑธ ๊ฐ€๋ฅด์ณ ์ฃผ์…”์„œ ๋„ˆ๋ฌด ๋†€๋ž๋‹ค..!!

 

๋„ค์ดํ‹ฐ๋ธŒ์—์„œ๋Š” ์ด๊ฑธ ActivtyIndicator๋ผ๊ณ  ํ•˜๋Š”๊ตฌ๋‚˜ ,,,

๊ฐ„๋‹จํžˆ ๋ฌด์—‡์ธ์ง€๋งŒ ์†Œ๊ฐœํ•ด์ฃผ์‹œ๋Š” ์ˆ˜์—…์ด์—ˆ์ง€๋งŒ ๋„ˆ๋ฌด๋„ˆ๋ฌด ์‹ ๊ธฐํ–ˆ๋‹ค.

ํŠนํžˆ๋‚˜ ์•ฑ์—์„œ๋Š” ํ•„์ˆ˜์ ์ธ ๋ถ€๊ฐ€ ์š”์†Œ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

 


  • ActivityIndicator ๋ชจ๋“ˆ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';

 

  • ์ฝ”๋“œ
<ActivityIndicator
        style={{paddingTop: 200}}
        size="large"
        color="green"
        animating={true}
/>

- ์—ฌ๊ธฐ์„œ animating={false}๋กœ ์ž‘์„ฑํ•˜๋ฉด ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์Œ !!

 

- ๊ฐ•์‚ฌ๋‹˜์ด ์‹ค์ œ๋กœ ์–ด๋–ค ์ž‘์—…์„ ์š”์ฒญํ•˜๊ณ  ๊ฐ’์„ {true}๋กœ ๋‘” ๋’ค, ์š”์ฒญํ•œ ์ž‘์—…์„ ํ• ๋‹น ๋ฐ›์œผ๋ฉด {false}๋กœ ๋‘๋ผ๊ณ ..? ๊ทธ๋Ÿฐ์‹์œผ๋กœ ์ด๋ค„์ง„๋‹ค๊ณ  ํ•˜์…จ๋˜ ๊ฒƒ ๊ฐ™๋‹ค!

 

Comments