React Native에서 로딩 표시기를 표시하는 방법은 무엇입니까?

로딩 표시기는 UI에서 만든 요청에 ​​시간이 걸릴 것이라고 사용자에게 알리고 싶을 때 사용됩니다. 사용자가 양식을 작성한 후 제출 버튼을 클릭했거나 일부 데이터를 얻기 위해 검색 버튼을 클릭한 경우

ReactNative는 UI에 로드 표시기를 표시하는 다양한 방법이 있는 ActivityIndicator 구성 요소를 제공합니다.

기본 ActivityIndicator 구성 요소는 다음과 같습니다 -

<ActivityIndicator animating = {animating} color = '#bc2b78' size = "large"
style = {yourstyle}/>

ActivityIndicator로 작업하려면 다음과 같이 가져와야 합니다. -

import { ActivityIndicator} from 'react-native';

다음은 ActivityIndicator에서 사용할 수 있는 몇 가지 중요한 속성입니다.

예:로딩 표시기 표시

로딩 표시기는 ActivityIndicator를 사용하여 달성되므로 먼저 가져오기 -

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

다음은 사용되는 ActivityIndicator 구성 요소입니다. -

<ActivityIndicator
   animating = {animating}
   color = '#bc2b78'
   size = "large"
style = {styles.activityIndicator}/>

애니메이션은 기본적으로 true로 설정되는 애니메이션 변수로 설정됩니다. closeActivityIndicator 메서드는 componentDidMount() 함수 내에서 호출되어 1분 후에 애니메이션 상태를 false로 설정합니다.

state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()

다음은 로딩 표시기를 표시하는 전체 코드입니다 -

import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
   state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()
   render() {
      const animating = this.state.animating
      return (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )
   }
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

출력