react-native 骨架屏 rn-placeholder之使用以及封装使用案例

首先是package的介绍

http://npm.taobao.org/package/rn-placeholder 

 

接下来是封装代码（安装引用本文不提及）

import React from "react";
import Placeholder from "rn-placeholder";
import { StyleSheet, View } from "react-native";

const Title = hasTitle => {
  return hasTitle ? (
    <View style={styles.title}>
      <Placeholder.Line />
    </View>
  ) : null;
};
const Placeholders = props => {
  const { ParagraphLength, ParagraphType, hasTitle, ...others } = props;
  const PlaceholderItem = Placeholder[ParagraphType];
  const PlaceholderContent = [];
  for (let key = 0; key < ParagraphLength; key++) {
    PlaceholderContent.push(
      <View style={styles.item} key={`PlaceholderContentKey${key}`}>
        {Title(hasTitle)}
        <PlaceholderItem {...others} animate="fade" />
      </View>
    );
  }
  return <View>{PlaceholderContent}</View>;
};

const ImageContent = props => {
  const baseOption = {
    ParagraphLength: 5,
    ParagraphType: "ImageContent",
    hasTitle: false,
    size: 60,
    lineNumber: 3,
    lineSpacing: 12,
    lastLineWidth: "60%"
  };
  const options = { ...baseOption, ...props };
  const { isLoading, list } = props;

  if (isLoading) {
    return Placeholders(options);
  }
  return typeof list === "function" && list();
};

const Paragraph = props => {
  const baseOption = {
    lineNumber: 3,
    textSize: 16,
    lineSpacing: 5,
    width: "100%",
    lastLineWidth: "70%",
    firstLineWidth: "50%"
  };

  const options = { ...baseOption, ...props };
  const { isLoading, list } = props;

  if (isLoading) {
    return Placeholders(options);
  }
  return typeof list === "function" && list();
};

/* 导出
 ============================================================ */
const ImagePlaceholder = Placeholder.connect(ImageContent);
const ParagraphPlaceholder = Placeholder.connect(Paragraph);
export { ImagePlaceholder, ParagraphPlaceholder };

/* 样式
 ============================================================ */
const styles = StyleSheet.create({
  title: {
    marginBottom: 12
  },
  item: {
    margin: 12
  }
});

 

使用（ 也支持段落ParagraphPlaceholder）

renderNews = () => {
    return (
      <View style={{ flex: 1 }}>
        <SectionItem title="最新消息" rightBtnText="更多" onPress={() => {}} />
        <ImagePlaceholder
          ParagraphLength={2}
          // isLoading={!this.alreadyLoad && loadStatus === LoadStatus.Loading}
          isLoading={false}
          list={this.renderTaskList}
        />
      </View>
    );
};