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

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

React Native活动指示器ActivityIndicator
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?