จะแสดงตัวระบุการโหลดใน React Native ได้อย่างไร?

ตัวบ่งชี้การโหลดจะใช้เมื่อเราต้องการบอกผู้ใช้ว่าคำขอที่พวกเขาทำบน UI นั้นต้องใช้เวลา ในกรณีที่ผู้ใช้คลิกปุ่มส่งหลังจากกรอกแบบฟอร์มหรือคลิกปุ่มค้นหาเพื่อรับข้อมูลบางส่วน

ReactNative นำเสนอองค์ประกอบ ActivityIndicator ที่มีวิธีต่างๆ ในการแสดงตัวบ่งชี้การโหลดบน UI

องค์ประกอบ 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}/>

แอนิเมชั่นถูกตั้งค่าเป็นตัวแปรแอนิเมชั่นซึ่งโดยดีฟอลต์จะถูกตั้งค่าเป็นจริง เมธอด closeActivityIndicator ถูกเรียกภายในฟังก์ชัน componentDidMount() ที่จะตั้งค่าสถานะการเคลื่อนไหวเป็นเท็จหลังจาก 1 นาที

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
   }
})

ผลลัพธ์