Bagaimana untuk menunjukkan penunjuk pemuatan dalam React Native?

Gunakan penunjuk pemuatan apabila kami ingin memberitahu pengguna bahawa permintaan yang mereka buat pada UI akan mengambil masa. Jika pengguna mengklik butang hantar selepas mengisi borang, atau mengklik butang carian untuk mendapatkan beberapa data.

ReactNative menyediakan komponen ActivityIndicator, yang boleh memaparkan penunjuk pemuatan pada UI dengan cara yang berbeza

Komponen ActivityIndicator asas adalah seperti berikut -

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

Untuk menggunakan ActivityIndicator, anda perlu menekan Import seperti berikut -

import { ActivityIndicator} from 'react-native';

. adalah beberapa sifat penting yang disediakan oleh ActivityIndicator.

Sr.NoProps dan Arahan1234

	AnimasiAnimasi untuk penunjuk pemuatan ia memerlukan nilai boolean benar untuk menunjukkan penunjuk, palsu untuk menyembunyikan penunjuk.
	WarnaWarna yang dipaparkan oleh penunjuk pemuatan.
	hidesWhenStopped Berhenti apabila penunjuk tidak mempunyai animasi. Nilainya ialah Betul/Salah.
	Saiz Penunjuk saiz. Nilainya berkisar dari kecil hingga besar.

Contoh: Paparan penunjuk pemuatan

Penunjuk pemuatan dilaksanakan menggunakan ActivityIndic​​cator, jadi import dulu-

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

Ini ialah ActivityIndic​​komponen cator yang digunakan-

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

kepada Pembolehubah animasi, tetapkan kepada benar secara lalai. Panggil kaedah closeActivityIndicator dalam fungsi componentDidMount(), yang akan menetapkan keadaan animasi kepada palsu selepas 1 minit.

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

Ini adalah kod lengkap untuk menunjukkan penunjuk pemuatan -

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

Atas ialah kandungan terperinci Bagaimana untuk menunjukkan penunjuk pemuatan dalam React Native?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!