React Native - ActivityIndicator

Trong chương này, chúng tôi sẽ hướng dẫn bạn cách sử dụng chỉ báo hoạt động trong React Native.

Bước 1: Ứng dụng

App thành phần sẽ được sử dụng để nhập và hiển thị ActivityIndicator.

App.js

import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'

const Home = () => {
   return (
      <ActivityIndicatorExample />
   )
}
export default Home

Bước 2: ActivityIndicatorExample

Thuộc tính Animating là Boolean được sử dụng để hiển thị chỉ báo hoạt động. Cái sau đóng sáu giây sau khi thành phần được gắn kết. Điều này được thực hiện bằng cách sử dụngcloseActivityIndicator() chức năng.

activity_indicator_example.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, 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
   }
})

Khi chúng tôi chạy ứng dụng, chúng tôi sẽ thấy trình tải trên màn hình. Nó sẽ biến mất sau sáu giây.