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
相关推荐
工业甲酰苯胺6 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
止观止6 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
G等你下课9 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登9 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我10 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper10 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳10 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱11 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
FogLetter11 小时前
深入浅出React-Router-Dom:从前端路由到SPA架构的华丽转身
前端·react.js