React-native-activityindicator
提供:Dev Guides
React Native-ActivityIndicator
この章では、React Nativeでアクティビティインジケーターを使用する方法を示します。
ステップ1:アプリ
*App* コンポーネントは、 *ActivityIndicator* のインポートと表示に使用されます。
App.js
import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'
const Home = () => {
return (
<ActivityIndicatorExample/>
)
}
export default Home
ステップ2:ActivityIndicatorExample
アニメーションプロパティは、アクティビティインジケーターを表示するために使用されるブール値です。 後者は、コンポーネントが取り付けられてから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
}
})
アプリを実行すると、画面にローダーが表示されます。 6秒後に消えます。