I have a question. I have a loader and during the loading I would show three different texts. Like text1, then this disappear and it's show text2 and then text3.
<View style={style.container}>
<View style={style.page}>
<ActivityIndicator size="large" color="#56cbbe" />
<Text>Text1.. </Text>
<Text>Text2.. </Text>
<Text>Text3.. </Text>
</View>
</View>
In this case I only show the three texts together. How can I do?
Thank you:)
What you want is to show indicator
and text1
during loading time and then text2
and text3
. Is that right?
So I made an example for you. This should solve the problem by changing the status
value. You can display the indicator
for the duration of loading and show the text by changing the status
value when loading is complete.
Example Code
//This is an example code to understand ActivityIndicator//
import React from 'react';
//import react in our code.
import { ActivityIndicator, Button, View, StyleSheet,Text } from 'react-native';
//import all the components we are going to use.
export default class App extends React.Component {
state = { showIndicator: true };
componentDidMount() {
setTimeout(() => {this.setState({showIndicator: false})}, 2000)
}
onButtonPress = () => {
//function to change the state to true to view activity indicator
//changing state will re-render the view and indicator will appear
};
render() {
//Check if showIndicator state is true the show indicator if not show button
if (this.state.showIndicator) {
return (
<View style={styles.container}>
{/*Code to show Activity Indicator*/}
<ActivityIndicator size="large" color="#0000ff" />
<Text>Text1.. </Text>
{/*Size can be large/ small*/}
</View>
);
} else {
return (
<View style={styles.container}>
<Text>Text2.. </Text>
<Text>Text3.. </Text>
</View>
);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: "center"
},
});
One way to solve this is to use setInterval and call update function to loop through the texts assuming if they are present in form of array.
Simply saying for example.
Let's maintain loadingText in state as loadingText: ['text1', 'text2', 'text3']
,A variable to track the present item as currentLoadingTextIndex: 0
and call setInterval in componentDidUpdate
. Be careful when calling update function in here,as one wrong mistake will make your app crash.
componentDidUpdate(prevProps, prevState) {
if (!prevState.isLoading && this.state.isLoading) {
this.timerId = setInterval(this.changeLoadText, 2000);
} else if (prevState.isLoading && !this.state.isLoading) {
clearInterval(this.timerId);
}
}
and finally our update function
changeLoadText = () => {
this.setState(prevState => {
return {
currentLoadingTextIndex:
(prevState.currentLoadingTextIndex + 1) %
prevState.loadingText.length,
};
});
};
I am attaching a working expo Demo for clarity purpose.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.