ホームページ > 記事 > ウェブフロントエンド > React Nativeでのプレースホルダーの使い方を詳しく解説

React Nativeでのプレースホルダーの使い方を詳しく解説

小云云オリジナル: 2018-01-30 09:45:222007ブラウズ

この記事では主にReact Nativeのデフォルトプレースホルダーの使い方を紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

初めてアプリを開いたとき、データを取得するためにインターフェースをリクエストします。それでは、データの取得中にユーザーに何が表示されるでしょうか。多くの国産アプリは、菊の代わりに同じ菊を使用するか (一般的にローディングと呼ばれます)、より考え抜かれて見栄えの良いローディングを実現します。ただし、データを取得してページをレンダリングするとき、切り替えは非常に突然になります。、常に非常に低く感じます。

Facebookのホームページリストはロードではなく実際のレイアウトに近いスケルトンアニメーションを使用しています。これはスケルトン画面またはプレースホルダーと呼ぶことができますが、これの利点はその後です。コンテンツがロードされ、最後に実際のレイアウトにスムーズかつシームレスに切り替えることができます。詳細が製品の品質を決定します。Facebook はユーザーエクスペリエンスとインタラクションの詳細において良い仕事をしていると思います。まずはFBのスクリーンショットを撮ります。

rn-placeholderは、placeholderのrn版をベースに、fllastlist、listview、SectionListの適応パッケージを作成しました。まず、私のオープンソースプロジェクトの効果を見てみましょう:

上記の効果を読んだ後、これは従来の読み込みよりもはるかに快適だと感じますか? 以下に例を示します:

1: Flastlist 、listview、SectionList のデモを使用します

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

 }

注: ListParagraph コンポーネントは現在私のオープンソースプロジェクトにあり、npm には追加されていません。必要な場合は、プロジェクトのアドレスを最後に示します。記事の

2つ: 左右のコンテンツレイアウト

import Placeholder from &#39;rn-placeholder&#39;;
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>
  }  
 }

3つ: 段落レイアウト

 import Placeholder from &#39;rn-placeholder&#39;;
 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>
  }  
 }

4つ: Line(行レイアウト)、Media(画像レイアウト）、使用方法は3と同じです。

完璧な結末！

React Nativeでのプレースホルダーの使い方を詳しく解説

関連記事