上一章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,
},
});
当我们运行应用程序时,我们会在屏幕上看到加载器,它会在六秒后消失。