React Native活动指示器ActivityIndicator – React Native实战教程

上一章React Native实战教程请查看： React Native模态框Modal

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

第1步：APP

App组件将用于导入并显示我们的ActivityIndicator。

App.js

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

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

第二步：ActivityIndicatorExample

Animating属性是一个布尔值，用于显示活动指示器，后者在组件挂载后6秒关闭，这是使用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,
  },
});

当我们运行应用程序时，我们会在屏幕上看到加载器，它会在六秒后消失。