📜  React Native-ActivityIndicator

📅  最后修改于: 2020-12-08 06:11:23             🧑  作者: Mango


在本章中,我们将向您展示如何在React Native中使用活动指示器。

步骤1:应用程式

应用程序组件将用于导入和显示我们的ActivityIndicator

App.js

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

const Home = () => {
   return (
      
   )
}
export default Home

步骤2:ActivityIndicatorExample

Animating属性是一个布尔值,用于显示活动指示器。组件安装后六秒关闭。这是使用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 (
         
            
         
      )
   }
}
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
   }
})

当我们运行该应用程序时,我们将在屏幕上看到加载程序。六秒钟后它将消失。

反应本机活动指标