React Native – Bài 17: ActivityIndicator

Trong chương này, chúng ta sẽ tìm hiểu cách sử dụng chỉ báo hoạt động trong React Native.

Bước 1: Ứng dụng

Thành phần ứng dụng sẽ được sử dụng để nhập và hiển thị ActivityIndicator của chúng tôi .

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 hoạt hình là một 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 hàm closeActivityIndicator() .

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, sẽ thấy trình tải trên màn hình. Nó sẽ biến mất sau sáu giây.