집 > 기사 > 웹 프론트엔드 > React Native에서 자리 표시자를 사용하는 방법에 대한 자세한 설명

React Native에서 자리 표시자를 사용하는 방법에 대한 자세한 설명

小云云원래의: 2018-01-30 09:45:222007검색

이 글은 주로 React Native의 기본 자리 표시자 사용을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

처음 앱을 열면 데이터를 얻기 위한 인터페이스를 요청하게 됩니다. 그러면 데이터를 얻는 동안 사용자에게 무엇이 표시되나요? 많은 국내 앱은 국화 대신 국화를 사용하거나(일반적으로 로딩이라고 함) 좀 더 세심하고 보기 좋은 로딩을 만듭니다. 그러나 데이터를 가져와서 페이지를 렌더링할 때 전환이 매우 갑작스럽습니다. 항상 매우 낮은 느낌입니다.

페이스북 홈페이지 리스트는 로딩이 아닌 실제 레이아웃에 가까운 스켈레톤 애니메이션을 사용하고 있습니다. 이게 스켈레톤 화면이나 플레이스홀더라고 할 수 있는데 이걸 뭐라고 번역해야 할지 모르겠네요. 콘텐츠가 로드되고 마지막으로 실제 레이아웃으로 매끄럽고 원활하게 전환할 수 있습니다. 세부 사항이 제품의 품질을 결정합니다. 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에서 자리 표시자를 사용하는 방법에 대한 자세한 설명

관련 기사