Explication détaillée de la façon d'utiliser l'espace réservé dans React Native

Cet article présente principalement l'utilisation de l'espace réservé prédéfini React Native. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Lorsque nous ouvrirons une application pour la première fois, nous demanderons à l'interface d'obtenir des données. Alors, qu'est-ce qui sera affiché à l'utilisateur pendant la période d'obtention des données ? De nombreuses applications domestiques utilisent un chrysanthème au lieu d'un chrysanthème (communément appelé chargement), ou elles sont plus réfléchies et effectuent un chargement plus esthétique. Cependant, lorsque les données sont obtenues et que la page est rendue, le changement sera très brusque. ce qui semble toujours très faible.

La liste de la page d'accueil de Facebook utilise une animation squelette proche de la mise en page réelle pour remplacer le chargement. Cette chose peut être appelée écran squelette ou espace réservé, mais une fois traduite, je ne sais vraiment pas en quoi la traduire. L'avantage est qu'une fois le contenu chargé, la mise en page réelle peut être modifiée de manière fluide et transparente. Les détails déterminent la qualité du produit. Je pense que Facebook a fait du bon travail en termes d'expérience utilisateur et de détails d'interaction. Prenez d'abord une capture d'écran de mon FB.

rn-placeholder est la version rn de placeholder Sur cette base, j'ai créé un package d'adaptation pour floatlist, listview et SectionList. Jetons d'abord un coup d'œil à l'effet dans mon projet open source :

Après avoir lu l'effet ci-dessus, pensez-vous qu'il est beaucoup plus confortable que le chargement traditionnel ? Voici un exemple :

1 : fllastlist, listview, SectionList use demo

 import { ListItem, ListParagraph } from 'components';
 export default class Zi extends Component {
  render() {
   const { loading } = this.props;
   return (
    <ListParagraph
     ParagraphLength={4} // 要渲染的条数
     isLoading={loading} // loading状态
     hasTitle // 是否需要title
     list={this.sectionList} // 这就是SectionList的函数
    />
   );
  }

 }

Remarque : le composant ListParagraph est actuellement dans mon open source projet et n'a pas été ajouté à npm , si vous en avez besoin, récupérez-le depuis mon projet. L'adresse du projet est à la fin de l'article

2 : Disposition du contenu à gauche et à droite

import Placeholder from 'rn-placeholder';
export default class Cheng extends Component {
  render() {
   return <Placeholder.ImageContent
    hasRadius //左边的方块是否需要圆角
    size={60} // 大小
    animate="fade" // 动画方式
    lineNumber={4} // 右边的线显示的数量
    lineSpacing={5} // 行间距的距离
    firstLineWidth=90% // 第一行的宽度
    lastLineWidth="70%" // 最后一行的宽度
    onReady={this.state.isReady} // 内容是否加载完毕，如果加载完毕会切换到你的真实内容布局
   >
    <Text>左图右内容布局</Text>
   </Placeholder.ImageContent>
  }  
 }

Trois : Disposition des paragraphes

 import Placeholder from 'rn-placeholder';
 export default class Cheng extends Component {
  render() {
   return <Placeholder.Paragraph
    size={60}
    animate="fade"
    lineNumber={4}
    lineSpacing={5}
    lastLineWidth="30%"
    onReady={this.state.isReady}
   >
    <Text>段落布局</Text>
   </Placeholder.Paragraph>
  }  
 }

Quatre : Il existe également Line (mise en page de ligne), Media (mise en page d'image), la méthode d'utilisation est la même que trois.

Fin parfaite !

Recommandations associées :

Exemple de code d'espace réservé encapsulé JQuery

Détails de l'attribut HTML5 Placeholder

Attribut d'espace réservé en HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!