react native中内容占位效果

效果实例图

实例代码skeleton.jsx

1. import React, { useEffect, useRef } from "react";
2. import { Animated, StyleSheet, View } from "react-native";
3. import { pxToPd } from "../../../common/js/device";
5. const Skeleton = ({ }) => {
6.     const progressBarWidth = useRef(new Animated.Value(0)).current;
8.     const animationFun = () => {
9.         Animated.timing(progressBarWidth, {
10.             toValue: 1, // 目标值
11.             duration: 1000, // 动画持续时间（毫秒）
12.             useNativeDriver: false // 必须设置为 false，因为布局动画不能使用原生驱动
13.         }).start(({ finished }) => {
14.             if (finished) {
15.                 progressBarWidth.setValue(0); // 重置为初始值
16.                 animationFun(); // 重新触发动画
17.             }
18.         });;
19.     }
21.     const widthValue = progressBarWidth.interpolate({
22.         inputRange: [0, 1],
23.         outputRange: ['0%', '100%']
24.     });
27.     useEffect(() => {
28.         animationFun();
30.         return () => { }
31.     }, []);
33.     return (
34.         <>
35.             <View style={styles.skeleton}>
36.                 <View style={styles.skeletonLogo}>
37.                     <Animated.View style={[styles.progress, { width: widthValue }]} />
38.                 </View>
39.                 <View style={styles.skeletonName}>
40.                     <Animated.View style={[styles.progress, { width: widthValue }]} />
41.                 </View>
42.                 <View style={styles.skeletonBtn}>
43.                     <Animated.View style={[styles.progress, { width: widthValue }]} />
44.                 </View>
45.             </View>
46.         </>
47.     )
48. }
50. const styles = StyleSheet.create({
51.     skeleton: {
52.         width: '100%',
53.         height: pxToPd(200),
54.         position: "relative",
55.         backgroundColor: "#fff",
56.         marginBottom: pxToPd(16)
57.     },
58.     skeletonLogo: {
59.         height: pxToPd(155),
60.         width: pxToPd(155),
61.         backgroundColor: '#f2f2f2',
62.         borderRadius: pxToPd(5),
63.         overflow: 'hidden',
64.         position: 'absolute',
65.         left: '3.2%',
66.         top: pxToPd(22)
67.     },
68.     skeletonName: {
69.         height: pxToPd(60),
70.         width: pxToPd(319),
71.         backgroundColor: '#f2f2f2',
72.         overflow: 'hidden',
73.         position: 'absolute',
74.         left: '29%',
75.         top: pxToPd(70)
76.     },
77.     skeletonBtn: {
78.         height: pxToPd(64),
79.         width: pxToPd(152),
80.         backgroundColor: '#f2f2f2',
81.         borderRadius: pxToPd(32),
82.         overflow: 'hidden',
83.         position: 'absolute',
84.         right: '3.2%',
85.         top: pxToPd(68)
86.     },
87.     progress: {
88.         height: '100%',
89.         backgroundColor: 'rgba(255, 255, 255, 0.3)'
90.     }
91. })
93. export default Skeleton

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。