react-native(리액트 네이티브) component - ActivityIndicator

react-native(리액트 네이티브) component - ActivityIndicator

import React, {Component} from 'react';

import {StyleSheet, Text, View, ActivityIndicator,} from 'react-native';

type Props = {};

export default class App extends Component<Props> {

constructor(props) {

super(props)

this.state = {

animating: false,

}

}

render() {

return (

<View style={styles.container}>

<Text style={styles.welcome}>Welcome to React Native!</Text>

<ActivityIndicator animating={true} size="large" color="#0000ff" />

<ActivityIndicator animating={false} size="small" color="#00ff00" />

<ActivityIndicator animating={true} size="large" color="#0000ff" />

<ActivityIndicator animating={this.state.animating} size="small" color="#00ff00" />

<ActivityIndicator

style={[styles.centering, {backgroundColor: 'green'}]}

animating={this.state.animating} size="small" color="#00ff00" />

<ActivityIndicator size="large" color="#0000ff" />

<ActivityIndicator size="small" color="#00ff00" />

<ActivityIndicator

style={[styles.centering, styles.gray]}

color="white"

/>

<ActivityIndicator style={[styles.centering]} />

<ActivityIndicator

animating={this.state.animating}

style={[styles.centering, {backgroundColor: '#eeeeee'}]}

/>

<ActivityIndicator

animating={this.state.animating}

style={[styles.centering, {backgroundColor: 'green'}]}

></ActivityIndicator>

<ActivityIndicator

style={[styles.centering, styles.gray]}

size="large"

color="white"

/>

<ActivityIndicator

style={[styles.centering, {transform: [{scale: 1.5}] }]}

size="large"

/>

<ActivityIndicator

style={styles.centering}

size={75}

/>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

centering: {

alignItems: 'center',

justifyContent: 'center',

padding: 8,

},

gray: {

backgroundColor: '#cccccc',

},

horizontal: {

flexDirection: 'row',

justifyContent: 'space-around',

padding: 8,

},

});