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
相关推荐
遂心_7 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_8 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy8 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy8 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子9 小时前
迭代器和生成器
前端·javascript
前端小书生10 小时前
React 组件渲染
前端·react.js
用户76787977373212 小时前
后端转全栈之Next.js SEO优化
react.js·next.js
源猿人12 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin12 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖14 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript