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;这里表述…

第4章 操作列表

第4章 操作列表 4.1 遍历整个列表4.1.1 深入研究循环4.1.2 在 for 循环中执行更多操作4.1.3 在 for 循环结束后执行一些操作 4.2 避免缩进错误4.3 组织列表4.3.1 使用函数 range()4.3.2 使用 range()创建数字列表4.3.3 对数字列表执行简单的统计计算4.3.4 列表解析 4.4 使用列表…

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

想知道如何让成绩查询变得简单又安全吗&#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之间在交互…

快慢指针算法举例

快慢指针算法 快慢指针算法(也称为龟兔赛跑算法)是一种用于检测链表中环的问题和其他相关问题的技巧。快慢指针通过两个指针以不同的速度遍历链表来解决问题。这些示例展示了快慢指针算法在 检测链表中环找到环的起点找到链表中间节点判断链表是否为回文 等问题中的应用。快…

Openstack学习(2)——Neutron

Neutron 的设计目标是实现“网络即服务&#xff08;Networking as a Service&#xff09;”。为了达到这一目标&#xff0c;在设计上遵循了基于SDN 实现网络虚拟化的原则&#xff0c;在实现上充分利用了Linux系统上的各种网络相关技术。 Neutron 功能 二层交换Swithing&#…

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;热反馈调节充电电流以限制模具温度。充电…

网络安全第一课

网络设备、 交换机&#xff0c;路由器&#xff0c;网线&#xff0c;防火墙。 虚拟化技术分为哪两大类 交换机是组建局域网&#xff0c;内网的重要设备&#xff0c;但是交换机依赖路由器的内网外网 局域网一般称为内网 路由器两个口&#xff0c;一个连接内网&#xff0c;一…

大模型日报2024-06-07

大模型日报 2024-06-07 大模型资讯 大规模单细胞转录组学基础模型研究 摘要: 大型预训练模型已成为基础模型&#xff0c;在自然语言处理及相关领域取得突破。本文介绍了在单细胞转录组学领域应用大规模基础模型的研究进展。 MMLU-Pro&#xff1a;评估语言理解模型的新基准 摘要…

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…

ImportError: /lib/x86_64-linux-gnu/libstdc++.so.6: 一些版本找不到

没有root (sudo) **ImportError: /lib/x86_64-linux-gnu/libstdc.so.6: version GLIBCXX_3.4.30 not found** 一般报这个错是因为pip/conda安装了某个包的版本高了一些。 通常情况下你会发现在本地自己的某个anaconda 虚拟环境下其实是有的 /home/xxx/packages/anaconda3/env…

K8s Pod的QoS类

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

day 37 738.单调递增的数字

738. 单调递增的数字 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 示例 1: 输入: n 10 输出: 9示例 2: 输入: n 1234 输…

Pytorch常用函数用法归纳:创建tensor张量

1.torch.arange() (1)函数原型 torch.arange(start,end,step,*,out,dtype,layout,device,requires_grad) (2)参数说明: 参数名称参数类型参数说明startNumber起始值&#xff0c;默认值为0endNumber结束值&#xff0c;取不到&#xff0c;为开区间stepNumber步长值&#xff0…

蓝桥云课第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 …