Ausführliche Erklärung zur Verwendung von Platzhaltern in React Native

In diesem Artikel wird hauptsächlich die Verwendung des voreingestellten Platzhalters React Native vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wenn wir eine App zum ersten Mal öffnen, fordern wir die Schnittstelle zum Abrufen von Daten an. Was wird dem Benutzer während des Datenabrufzeitraums angezeigt? Viele inländische Apps verwenden dieselbe Chrysantheme anstelle einer Chrysantheme (allgemein als Laden bezeichnet), oder sie sind durchdachter und sorgen für ein besser aussehendes Laden. Wenn die Daten jedoch abgerufen und die Seite gerendert wird, erfolgt der Wechsel sehr abrupt , was sich immer sehr niedrig anfühlt.

Die Facebook-Homepage-Liste verwendet eine Skelettanimation, die dem tatsächlichen Layout nahe kommt, um das Laden zu ersetzen. Dieses Ding kann als Skelettbildschirm oder Platzhalter bezeichnet werden, aber wenn ich es übersetzt habe, weiß ich wirklich nicht, in was ich es übersetzen soll Der Vorteil davon ist, dass das tatsächliche Layout nach dem Laden reibungslos und nahtlos umgestellt werden kann. Ich denke, Facebook hat gute Arbeit in Bezug auf Benutzererfahrung und Interaktionsdetails geleistet. Mache zunächst einen Screenshot von meiner FB.

rn-placeholder ist die rn-Version von placeholder. Darauf basierend habe ich ein Anpassungspaket für floatlist, listview und SectionList erstellt. Schauen wir uns zunächst den Effekt in meinem Open-Source-Projekt an:

Haben Sie nach dem Lesen des obigen Effekts das Gefühl, dass er viel komfortabler ist als das herkömmliche Laden? ? Hier ist ein Beispiel:

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的函数
    />
   );
  }

 }

Hinweis: Die ListParagraph-Komponente befindet sich derzeit in meiner Open Source Projekt und wurde nicht zu npm hinzugefügt. Wenn Sie es benötigen, erhalten Sie es von meinem Projekt. Die Projektadresse finden Sie am Ende des Artikels

2: Inhaltslayout links und rechts

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>
  }  
 }

Drei: Absatzlayout

 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>
  }  
 }

Viertens: Es gibt auch Line (Zeilenlayout) und Media (Bildlayout). Die Verwendungsmethode ist die gleiche wie bei drei.

Perfektes Ende!

Verwandte Empfehlungen:

JQuery-gekapselter Platzhalter-Beispielcode

Details zum HTML5-Platzhalterattribut

Platzhalterattribut in HTML5

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Platzhaltern in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!