[React-Native] ActivityIndicator ( 로딩화면 )

열어분 Happy New Year ♥

 

List 를 불러올 때 양이 많아서 Delay가 있기 때문에 List들을 불러올 때 동안 로딩화면이 돌아가도록 구현해보았어요

---

📍 ActivityIndicator 란

원형의 로딩창으로 일부 활동에서 진행상황을 나타내는데 사용됩니다

 

✅ Indicator.js

- 로딩화면이 필요한 곳이 있을 때마다 불러서 사용하기 위해 하나의 파일을 만들어주었습니다.

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

class Indicator extends Component{
    render(){
        return (
        <View style={styles.container}>
            <ActivityIndicator size="large" color="#0066FF"/>
        </View>
        )
    }
} 

const styles = StyleSheet.create({
    container :{
        flex : 1,
        justifyContent :"center"
    }
    
})

export default Indicator;

color : string Type

size : 'small' , 'large', number ( Default 값은 'small')

 

✅ Home.js

import Indicator from '../../../util/indicator';

constructor(props) {
    super(props);
    this.state = {
        indicator : false,  
   };
}

componentDidMount() {
    this.setState({indicator : true}); //로딩화면
    this.callGetGoodsAPI().then((response) => {
        this.Contents = response;
        console.log(this.Contents);
        this.setState({ goodsContent: response });
        this.setState({indicator : false}); //로딩화면
    });
}

만들어주었던 Indicator 파일을 Import 시켜준 뒤, List를 불러오는동안 로딩 화면이 뜰 수 있도록 state 값을 True로

List를 다 불러왔으면 로딩화면이 없어질 수 있도록 state 값을 false로 변경해주어 로딩화면을 구현해보았습니다.

---

✅ modal 배경색을 불투명하게 지정

import React, { Component } from "react";
import { ActivityIndicator, StyleSheet, View, Modal } from "react-native";

class Indicator extends Component {
    render() {
        return (
            <Modal animationType={"fade"} transparent={true} visible={true}>
                <View style={styles.container}>
                    <ActivityIndicator size="large" color="#0066FF" />
                </View>
            </Modal>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'rgba(52, 52, 52, 0.4)',//불투명도 40%
        justifyContent: "center"
    },
})

export default Indicator;

'rgba(52, 52, 52, 0.4)' 를 배경색으로 지정해주어 불투명도가 40%인 회색으로 지정할 수 있습니니다.

불투명도는 0.0 ~ 1.0 까지 지정 가능