React Native에서 로딩 표시기를 어떻게 표시하나요?

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

ReactNative는 UI에 로딩 표시를 다양한 방식으로 표시할 수 있는 ActivityIndicator 컴포넌트를 제공합니다.

기본 ActivityIndicator 컴포넌트는 다음과 같습니다. -

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

ActivityIndicator를 사용하려면 다음과 같이 Import를 눌러야 합니다. -

import { ActivityIndicator} from 'react-native';

다음 ActivityIndicator에서 제공하는 몇 가지 중요한 속성입니다.

Sr.No	Props and Instructions
1	Animation p> 로딩 표시기용 애니메이션. 부울 값을 취합니다 표시기를 표시하려면 true이고, 표시기를 숨기려면 false입니다.
2	Color p> 로딩 표시기에 표시되는 색상입니다.
3	hidesWhenStopped 표시기에 애니메이션이 없으면 중지됩니다. 그 가치는 맞다 틀리다.
4	Size 크기 표시기. 값은 작은 것부터 큰 것까지 다양합니다.

예: 로딩 표시기 표시

로딩 표시기는 ActivityIndic​​cator를 사용하여 구현되므로 먼저 가져옵니다-

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

사용된 ActivityIndic​​​cator 구성 요소입니다-

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

애니메이션은 애니메이션 변수로 설정하고 기본적으로 true로 설정합니다. componentDidMount() 함수에서 closeActivityIndicator 메서드를 호출하면 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 (
         
            
         
      )
   }
}
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
   }
})

output

위 내용은 React Native에서 로딩 표시기를 어떻게 표시하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!