Detailed explanation of how to use placeholder in React Native

This article mainly introduces the use of React Native's default placeholder. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

When we open an app for the first time, we will request the interface to obtain data. So what will be displayed to the user during the period of obtaining data? Many domestic apps use the same chrysanthemum instead of a chrysanthemum (commonly known as loading), or they are more thoughtful and make a better-looking loading. However, when the data is obtained and the page is rendered, the switching will be very abrupt, which always feels very low.

The Facebook homepage list uses a skeleton animation that is close to the real layout to replace loading. This thing can be called skeleton screen or placeholder, but when translated, I really don’t know what to translate it into. The advantage of this is After the content is loaded, the real layout can be switched smoothly and seamlessly. Details determine the quality of the product. I think Facebook has done a good job in user experience and interaction details. First take a screenshot of my FB.

rn-placeholder is the rn version of placeholder. Based on this, I made an adaptation package for fllastlist, listview, and SectionList. Let’s first take a look at the effect in my open source project:

#After reading the above effect, do you feel that it is much more comfortable than traditional loading? Here is an example :

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

 }

Note: The ListParagraph component is currently in my open source project and has not been added to npm yet. If you need it, go to my project. The project address is at the end of the article

2: Content layout on the left and right

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

Three: Paragraph layout

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

##Four: There are also Line (line layout), Media (picture layout), use The method is the same as three.

Perfect ending!

Related recommendations:

jQuery encapsulated placeholder example code

Detailed introduction to HTML5 Placeholder attribute

placeholder attribute in HTML5

The above is the detailed content of Detailed explanation of how to use placeholder in React Native. For more information, please follow other related articles on the PHP Chinese website!