首先是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>
);
};