Comment montrer la progression de chargement ou la filante au milieu de l'écran avec React natif?

Question

Je développe React application native.

J'ai pu résoudre tous les problèmes par moi-même, mais c'est une exception. Je vais charger un autre écran avec le navigateur d'onglets inférieur.

Par exemple, après la connexion de l'utilisateur à l'application, il doit afficher l'écran d'accueil principal qui possède de nombreuses images et de nombreux effets de la feuille de style, icônes. À cause de cela, après la confirmation de connexion (je veux dire après l'alerte du login confirmant), l'écran d'accueil principal apparaît après quelques secondes.

Donc, je souhaite montrer une fileuse dans l'écran de connexion lors du chargement de l'écran d'accueil principal en arrière-plan et lorsqu'il est prêt à afficher, effacez Spinner et afficher l'écran d'accueil principal. Comment puis-je faire ceci?

Mon navigateur d'onglet inférieur a été créé simplement avec createBottomTabNavigator() méthode.

Answer 1

import { ActivityIndicator } from 'react-native';

export default class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            spinner : true
        }
    }
    render() {
        return (
        <View style={{flex : 1, justifyContent: 'center', alignItems: 'center',}}>
        {
          this.state.spinner &&
          <ActivityIndicator  color={'#fff'} />
        }
        </View>
        )
    }
}