Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để hiển thị chỉ báo tải trong React Native?

Chỉ báo tải được sử dụng khi chúng tôi muốn cho người dùng biết yêu cầu họ thực hiện trên giao diện người dùng sẽ mất thời gian. Trong trường hợp người dùng đã nhấp vào nút gửi sau khi điền vào biểu mẫu hoặc đã nhấp vào nút tìm kiếm để lấy một số dữ liệu.

ReactNative cung cấp thành phần ActivityIndicator có các cách khác nhau để hiển thị các chỉ báo tải trên giao diện người dùng.

Thành phần ActivityIndicator cơ bản như sau -

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

Để làm việc với ActivityIndicator, bạn cần nhập nó như sau -

import { ActivityIndicator} from 'react-native';

Dưới đây là một số thuộc tính quan trọng có sẵn với ActivityIndicator.

Sr.No Đạo cụ &Mô tả
1 tạo hoạt ảnh
Để tạo hoạt ảnh cho chỉ báo đang tải, cần có boolean valuetrue để hiển thị chỉ báo và false để ẩn nó.
2 màu
Màu được hiển thị cho chỉ báo tải.
3 ẩnWhenStopped
Để dừng chỉ báo khi không hoạt ảnh. Giá trị istrue / false.
4 kích thước
Kích thước của chỉ báo. Các giá trị nhỏ và lớn.

Ví dụ:Hiển thị chỉ báo tải

Chỉ báo tải được thực hiện bằng cách sử dụng ActivityIndicator, vì vậy hãy nhập nó trước -

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

Đây là thành phần ActivityIndicator được sử dụng -

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

Hoạt ảnh được đặt thành biến hoạt ảnh, theo mặc định được đặt thành true. Phương thức closeActivityIndicator được gọi bên trong hàm componentDidMount () sẽ đặt trạng thái hoạt ảnh thành false sau 1 phút.

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

Đây là mã đầy đủ để hiển thị chỉ báo tải -

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

Đầu ra

Làm cách nào để hiển thị chỉ báo tải trong React Native?