J'essaie d'ajouter un écran éclabousseur avant de réagir des charges.
Puisque j'utilise réagissant scripts / réacteur-app mon index.tsx n'a cette partie: J'ai essayé d'ajouter ma propre div sur la même page mais ça ne 't show. Je voudrais afficher un écran vide simple avec mon image Splash sur une minuterie de 1 seconde avant de réagir des charges pour éviter / masquer le déplacement des éléments de rendu. ** Si je ajoute l'écran dans App.TSX, le changement de vitesse se produit avant que l'écran charge Ajoutez un écran avant de réagir:
chargement d'un chargeur approprié non supérieur pour .5 - 1 sec jusqu'à présent, cette approche fonctionne mieux mais je tiens à la mise à jour si je trouve des problèmes ou quelque chose mieux
3 Réponses :
Alors, allez à votre index.html dans votre dossier public et à l'intérieur
Ajoutez votre code d'écran SPLASH, lorsque vous réagissez des charges, il remplace tout le contenu à l'intérieur de la DIV avec racine ID
Il n'y a pas d'index.html. Ceci est une application réagissante qui génère index.tsx. J'ai déjà essayé d'ajouter ma page Splash là-bas comme indiqué dans ma question
Vaut la peine de mentionner - si vous construisez une pwa et que vous voulez avoir une image à l'intérieur de l'index.html <- ajoutez le code HTML de l'écran SPLASH ICI ->
2 commentaires
Utilisez SVG ou convertissez votre image en base64 et utilisez une uri de données. Cela garantit que l'image se termine dans le manifeste de pré-cache générée automatiquement, car les données sont directement intégrées à Index.html, plutôt que dans un fichier d'image distinct.
Je ne sais pas si cela fonctionnera du tout, ce n'est pas testé mais peut-être que cela vous mènera à la bonne direction? Donc, voici mes 2 cents
class AnotherComponent extends Component {
...
}
export default withSplash(AnotherComponent);
Merci! J'ai essayé cet itinéraire mais au moment où le code de réagissance est trop tard. J'avais besoin de quelque chose de plus immédiat. La solution dans Index.html fonctionne très bien
En fait, la solution Index.html est toujours saccadée :( Je vais essayer votre approche maintenant
Hey Hey n'ai pas essayé spécifiquement comme l'autre était similaire et cela a fonctionné, mais on dirait que cela fonctionnerait la même chose!
Ceci est un exemple pour afficher le chargeur pendant cinq secondes à l'aide de état code> et Settimeout () code>, à la place de SPLASH SCREE Composant CODE>. import React, { Component } from 'react';
import Drawer from '../Drawer/Drawer';
import Loader from '../../components/UI/Spinner/Loader/Loader';
class App extends Component {
state = {
loading: true
}
componentDidMount(){
setTimeout(() => {
this.setState({loading: false});
}, 5000);
}
render() {
return (
<React.Fragment>
{
this.state.loading ? <Loader />: <Drawer />
}
</React.Fragment>
);
}
}
export default App;
Jusqu'à présent, cela fonctionne beaucoup mieux que mon chargeur HTML!
Que voulez-vous dire par déplacement? Pourquoi n'avez-vous pas quelque chose comme la variable isolant dans l'état et rendez-vous conditionnellement votre application? Comme si elle est chargée, affichez-la, NULL ou un écran SPLASH et une fois que vous avez tout ce que vous avez tout ce que vous avez prêt, l'application complète?
L'extrait de la deuxième solution dans ce poste pourrait également aider: Stackoverflow.com/a/40989121/9598077