리액트네이티브 ActivityIndicator (리액트네이티브 로딩바)

ActivityIndicator

로딩바를 표시하는 컴포넌트이다. 

import React, {Component} from 'react';
import {StyleSheet, View, ActivityIndicator} from 'react-native';
 
 
export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator animating="true" size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})
 

[App.js]

주요속성는 다음과 같다. 

animating : ActivityIndicator 표시할지 말지 여부를 나타낸다. (기본값 true)

color : spinner에 전경색을 표시한다. (기본값 회색)

size :  ActivityIndicator에 크기를 지정한다. 숫자값을 지원하는건 Android에서만 가능

원문 : https://facebook.github.io/react-native/docs/activityindicator