react native中内容占位效果

react native中内容占位效果

    • 效果实例图
    • 实例代码skeleton.jsx

效果实例图

在这里插入图片描述

实例代码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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/24305.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

寻找python库的安装路径

以pip库为例 要找到并修改 pip 库中的 __pip-runner__.py 文件&#xff0c;您可以按照以下步骤操作&#xff1a; 找到 pip 库的安装路径&#xff1a; 通常&#xff0c;Python 库会安装在您的虚拟环境或全局 Python 包目录中。您可以通过以下命令来找到 pip 库的路径&#xff1…

代码随想录算法训练营day31|455.分发饼干、376.摆动序列、53.最大子序和

分发饼干 455. 分发饼干 - 力扣&#xff08;LeetCode&#xff09; 贪心算法&#xff0c;让每个饼干给到能够满足的孩子&#xff0c;所以需要对饼干尺寸和孩子的满足值先进行排序&#xff0c;然后针对每一个饼干的尺寸&#xff0c;挑选恰好能够满足的孩子&#xff08;这里表述…

期末成绩怎么单独发给家长

想知道如何让成绩查询变得简单又安全吗&#xff1f;跟着我&#xff0c;带你发现一个让家长和老师都省心的神器&#xff01; 传统的成绩发布方式&#xff0c;一张张成绩单&#xff0c;一封封邮件&#xff0c;或是一条条短信&#xff0c;这些方法虽然有效&#xff0c;但效率不高&…

[论文笔记]AIOS: LLM Agent Operating System

引言 这是一篇有意思的论文AIOS: LLM Agent Operating System&#xff0c;把LLM智能体(代理)看成是操作系统。 基于大语言模型(LLMs)的智能代理的集成和部署过程中存在着许多挑战&#xff0c;其中问题包括代理请求在LLM上的次优调度和资源分配&#xff0c;代理和LLM之间在交互…

C#上位机开发

目录 一、上位机简介二、C#语法三、新建VS工程四、WinForm控件4.1 属性4.2 事件4.3 窗体方法4.4 常用控件4.5 布局 五、Serial上位机5.1 UI界面设计5.2 功能设计 六、项目打包成安装包6.1 前提准备6.2 打包步骤 一、上位机简介 在单片机项目开发中&#xff0c;上位机也是一个很…

vue3设置全局变量并获取 全局响应式变量 窗口大小

设置 js文件统一管理全局变量 方法1 app provide() 全局提供变量 通过inject()使用 方法2 app实例配置全局变量 获取 通过 getCurrentInstance.appContext.config.globalProperties.$innerWidth访问到 code import { ref } from vue export const useGlobalState () > {c…

SD4056E 1.1A锂离子电池线性充电器芯片IC

一般描述 SD4056E是一个完整的CC/CV线性充电器单节锂离子电池。它是专门设计的USB电源规格内工作。 由于内部P-MOSFET架构&#xff0c;不需要外部检测电阻&#xff0c;也不需要阻塞二极管。在高功率运行或高环境温度下&#xff0c;热反馈调节充电电流以限制模具温度。充电…

ALSA 用例配置

ALSA 用例配置。参考 ALSA 用例配置 来了解更详细信息。 ALSA 用例配置 用例配置文件使用 配置文件 语法来定义静态配置树。该树在运行时根据配置树中的条件和动态变量进行评估&#xff08;修改&#xff09;。使用 用例接口 API 解析结果并将其导出到应用程序。 配置目录和主…

elementui Menu 二级菜单 min-width修改无效

原因&#xff1a;可能是生成的二级菜单样式里面没有带特定的hash属性 而vue代码里面样式里带了 scoped生成的样式有改样式选择器 从而无法成功选择 解决&#xff1a;让样式可以全局选择 不带属性选择器 单文件组件 CSS 功能 | Vue.js :global(.el-menu--vertical .el-menu--p…

进入某个页面时将VUE中的某个Button按钮设置为选中状态

进入某个页面时将VUE中的某个Button按钮设置为选中状态 我想达到的效果如标题所说&#xff0c;目的是为了表示页面展示的内容是由于该按钮被选择的结果。 解决思路是使用VUE中的mounted()钩子函数&#xff0c;在该函数中调用按钮得到焦点方法、按钮被点击方法。具体代码如下&am…

K8s Pod的QoS类

文章目录 OverviewPod的QoS分类Guaranteed1.如何将 Pod 设置为保证Guaranteed2. Kubernetes 调度器如何管理Guaranteed类的Pod Burstable1. 如何将 Pod 设置为Burstable2.b. Kubernetes 调度程序如何管理 Burstable Pod BestEffort1. 如何将 Pod 设置为 BestEffort2. Kubernete…

蓝桥云课第12届强者挑战赛

第一题&#xff1a;字符串加法 其实本质上就是一个高精度问题&#xff0c;可以使用同余定理的推论 &#xff08;ab&#xff09;%n((a%n)(b%n))%n; #include <iostream> using namespace std; const int mod1e97; int main() {string a,b;cin>>a>>b;ab;int …

第九篇——冗余量:《史记》和《圣经》那个信息量大?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 通过信息量的对比&#xff0c;引出来冗余度的概念&#xff0c;又深入浅出…

【传知代码】基于曲率的图重新布线(论文复现)

前言&#xff1a;在图形处理中&#xff0c;一个至关重要的问题是图形的重新布线&#xff0c;即在不改变图形基本结构的前提下&#xff0c;通过调整节点间的连接关系&#xff0c;使图形具有更好的性质&#xff0c;如更低的复杂度、更高的可视化效果或更强的鲁棒性。传统的图形重…

VMware 三种网络模式

目录 一、网卡、路由器、交换机 二、虚拟网络编辑器 三、网络模式 1.桥接模式 通信方式 特点 配置 连通情况 使用场景 2.NAT模式 通信方式 特点 配置 连通情况 使用场景 3.仅主机 通信方式 特点 配置 连通情况 使用场景 一、网卡、路由器、交换机 网卡(Ne…

大数据处理学习笔记

sudo tar -zxvf hadoop-1.1.2.tar.gz -C / #解压到/usr/local目录下 sudo mv hadoop-1.1.2 hadoop #重命名为hadoop sudo chown -R python ./hadoop #修改文件权限 //java安装同上给hadoop配置环境变量&#xff0c;将下面代…

webman中创建udp服务

webman是workerman的web开发框架 可以很容易的开启udp服务 tcp建议使用gatewayworker webman GatewayWorker插件 创建udp服务: config/process.php中加入: return [// File update detection and automatic reloadmonitor > [ ...........], udp > [handler > p…

WWDC24即将到来,ios18放大招

苹果公司即将在下周开全球开发者大会(WWDC)&#xff0c;大会上将展示其人工智能技术整合到设备和软件中的重大进展,包括与OpenAI的历史性合作。随着大会的临近,有关iOS 18及其据称采用AI技术支持的应用程序和功能的各种泄露信息已经浮出水面。 据报道,苹果将利用其自主研发的大…

力扣303. 区域和检索 - 数组不可变

Problem: 303. 区域和检索 - 数组不可变 文章目录 题目描述思路复杂度Code 题目描述 思路 创建前缀和数组preSum&#xff0c;其中preSum[i]处元素值为nums[0] - nums[i - 1]处元素值得和&#xff0c;当调用sumRange函数时直接返回preSum[right 1] - preSum[left] 复杂度 函数…

数据结构之ArrayList与顺序表(上)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 顺序表的学习&#xff0c;点我 上面这篇博文是关于顺序表的基础知识&#xff0c;以及顺序表的实现。…