react native中内容占位效果

react native中内容占位效果

效果实例图

实例代码skeleton.jsx

复制代码
import React, { useEffect, useRef } from "react";
import { Animated, StyleSheet, View } from "react-native";
import { pxToPd } from "../../../common/js/device";

const Skeleton = ({ }) => {
    const progressBarWidth = useRef(new Animated.Value(0)).current;

    const animationFun = () => {
        Animated.timing(progressBarWidth, {
            toValue: 1, // 目标值
            duration: 1000, // 动画持续时间(毫秒)
            useNativeDriver: false // 必须设置为 false,因为布局动画不能使用原生驱动
        }).start(({ finished }) => {
            if (finished) {
                progressBarWidth.setValue(0); // 重置为初始值
                animationFun(); // 重新触发动画
            }
        });;
    }

    const widthValue = progressBarWidth.interpolate({
        inputRange: [0, 1],
        outputRange: ['0%', '100%']
    });


    useEffect(() => {
        animationFun();

        return () => { }
    }, []);

    return (
        <>
            <View style={styles.skeleton}>
                <View style={styles.skeletonLogo}>
                    <Animated.View style={[styles.progress, { width: widthValue }]} />
                </View>
                <View style={styles.skeletonName}>
                    <Animated.View style={[styles.progress, { width: widthValue }]} />
                </View>
                <View style={styles.skeletonBtn}>
                    <Animated.View style={[styles.progress, { width: widthValue }]} />
                </View>
            </View>
        </>
    )
}

const styles = StyleSheet.create({
    skeleton: {
        width: '100%',
        height: pxToPd(200),
        position: "relative",
        backgroundColor: "#fff",
        marginBottom: pxToPd(16)
    },
    skeletonLogo: {
        height: pxToPd(155),
        width: pxToPd(155),
        backgroundColor: '#f2f2f2',
        borderRadius: pxToPd(5),
        overflow: 'hidden',
        position: 'absolute',
        left: '3.2%',
        top: pxToPd(22)
    },
    skeletonName: {
        height: pxToPd(60),
        width: pxToPd(319),
        backgroundColor: '#f2f2f2',
        overflow: 'hidden',
        position: 'absolute',
        left: '29%',
        top: pxToPd(70)
    },
    skeletonBtn: {
        height: pxToPd(64),
        width: pxToPd(152),
        backgroundColor: '#f2f2f2',
        borderRadius: pxToPd(32),
        overflow: 'hidden',
        position: 'absolute',
        right: '3.2%',
        top: pxToPd(68)
    },
    progress: {
        height: '100%',
        backgroundColor: 'rgba(255, 255, 255, 0.3)'
    }
})

export default Skeleton
相关推荐
mCell5 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip5 小时前
Node.js 子进程:child_process
前端·javascript
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端12 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧12 小时前
Promise 的使用
前端·javascript
前端康师傅14 小时前
JavaScript 作用域
前端·javascript
云枫晖14 小时前
JS核心知识-事件循环
前端·javascript