优化空状态图片样式

This commit is contained in:
2025-12-04 14:10:40 +08:00
parent 61b7309c32
commit b3315177dd
4 changed files with 24 additions and 4 deletions

View File

@@ -11,25 +11,39 @@ interface IProps {
wrapperHeight?: string; wrapperHeight?: string;
width?: string; width?: string;
height?: string; height?: string;
scale?: string;
} }
const ListLoadError = (props: IProps) => { const ListLoadError = (props: IProps) => {
const { reload, text, errorImg, btnText, btnImg, wrapperHeight="", width = "", height = "" } = props; const {
reload,
text,
errorImg,
btnText,
btnImg,
wrapperHeight = "",
width = "",
height = "",
scale = "",
} = props;
const handleReload = () => { const handleReload = () => {
reload && typeof reload === "function" && reload(); reload && typeof reload === "function" && reload();
}; };
return ( return (
<View className={styles.listLoadError} style={{height: wrapperHeight}}> <View className={styles.listLoadError} style={{ height: wrapperHeight }}>
<Image <Image
className={styles.listLoadErrorImg} className={styles.listLoadErrorImg}
style={{ width, height }} style={{ width, height, transform: `scale(${scale})` }}
src={errorImg ? img[errorImg] : img.ICON_LIST_LOAD_ERROR} src={errorImg ? img[errorImg] : img.ICON_LIST_LOAD_ERROR}
/> />
{text && <Text className={styles.listLoadErrorText}>{text}</Text>} {text && <Text className={styles.listLoadErrorText}>{text}</Text>}
{reload && ( {reload && (
<View className={styles.listLoadErrorBtn} onClick={handleReload}> <View className={styles.listLoadErrorBtn} onClick={handleReload}>
<Image src={btnImg ? img[btnImg] : img?.ICON_LIST_RELOAD} className={styles.reloadIcon} /> <Image
src={btnImg ? img[btnImg] : img?.ICON_LIST_RELOAD}
className={styles.reloadIcon}
/>
{btnText ? " " + btnText : "重试"} {btnText ? " " + btnText : "重试"}
</View> </View>
)} )}

View File

@@ -32,6 +32,7 @@ const ListContainer = (props) => {
listLoadErrorWrapperHeight, listLoadErrorWrapperHeight,
listLoadErrorWidth, listLoadErrorWidth,
listLoadErrorHeight, listLoadErrorHeight,
listLoadErrorScale,
} = props; } = props;
const timerRef = useRef<NodeJS.Timeout | null>(null); const timerRef = useRef<NodeJS.Timeout | null>(null);
const loadingStartTimeRef = useRef<number | null>(null); const loadingStartTimeRef = useRef<number | null>(null);
@@ -168,6 +169,7 @@ const ListContainer = (props) => {
wrapperHeight={listLoadErrorWrapperHeight || ""} wrapperHeight={listLoadErrorWrapperHeight || ""}
width={listLoadErrorWidth || ""} width={listLoadErrorWidth || ""}
height={listLoadErrorHeight || ""} height={listLoadErrorHeight || ""}
scale={listLoadErrorScale || ""}
/> />
); );
} }

View File

@@ -241,6 +241,7 @@ const MyselfPageContent: React.FC = () => {
listLoadErrorWrapperHeight="fit-content" listLoadErrorWrapperHeight="fit-content"
listLoadErrorWidth="320px" listLoadErrorWidth="320px"
listLoadErrorHeight="152px" listLoadErrorHeight="152px"
listLoadErrorScale="1.2"
defaultShowNum={3} defaultShowNum={3}
/> />
</ScrollView> </ScrollView>
@@ -262,6 +263,7 @@ const MyselfPageContent: React.FC = () => {
listLoadErrorWrapperHeight="fit-content" listLoadErrorWrapperHeight="fit-content"
listLoadErrorWidth="320px" listLoadErrorWidth="320px"
listLoadErrorHeight="152px" listLoadErrorHeight="152px"
listLoadErrorScale="1.2"
defaultShowNum={3} defaultShowNum={3}
/> />
</ScrollView> </ScrollView>

View File

@@ -316,6 +316,7 @@ const OtherUserPage: React.FC = () => {
listLoadErrorWrapperHeight="fit-content" listLoadErrorWrapperHeight="fit-content"
listLoadErrorWidth="320px" listLoadErrorWidth="320px"
listLoadErrorHeight="152px" listLoadErrorHeight="152px"
listLoadErrorScale="1.2"
defaultShowNum={3} defaultShowNum={3}
/> />
</ScrollView> </ScrollView>
@@ -359,6 +360,7 @@ const OtherUserPage: React.FC = () => {
listLoadErrorWrapperHeight="fit-content" listLoadErrorWrapperHeight="fit-content"
listLoadErrorWidth="320px" listLoadErrorWidth="320px"
listLoadErrorHeight="152px" listLoadErrorHeight="152px"
listLoadErrorScale="1.2"
defaultShowNum={3} defaultShowNum={3}
/> />
</ScrollView> </ScrollView>