上一章React
Native实战教程请查看： React
Native模态框Modal
【React Native活动指示器ActivityIndicator –
React Native实战教程】在本章中，我们将向你展示如何在React Native中使用活动指示器。
第1步：APPApp组件将用于导入并显示我们的ActivityIndicator。
App.js
import React from 'react';
import ActivityIndicatorExample from './activity_indicator_example.js';
const Home = () => {
return <
ActivityIndicatorExample />;
};
export default Home;
第二步：ActivityIndicatorExampleAnimating属性是一个布尔值，用于显示活动指示器，后者在组件挂载后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选择器Picker – React Native实战教程
- React Native模态框Modal – React Native实战教程
- React Native WebView使用 – React Native实战教程
- React Native视图View元素 – React Native实战教程
- PHP Ds PriorityQueuealloc()函数用法介绍
- HTML DOM console.trace()方法用法实例
- 算法设计（模乘逆元问题）
- 算法设计（多数元素问题）
- Python MongoDB – create_index查询用法详细示例