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
相关推荐
鸡吃丸子25 分钟前
Next.js 入门指南
开发语言·javascript·next.js
罚时大师月色38 分钟前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz1 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
fury_1231 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
宁&沉沦1 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir2 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
古一|3 小时前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda73 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
少卿3 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>3 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript