Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Rn页面滚动显示隐藏head动画

Rn页面滚动显示隐藏head动画

作者头像
明知山
发布于 2023-10-03 00:38:04
发布于 2023-10-03 00:38:04
40300
代码可运行
举报
文章被收录于专栏:前端开发随笔前端开发随笔
运行总次数:0
代码可运行

完整代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { View, Text, StyleSheet, Animated } from 'react-native'
export default () => {
    const opacity = new Animated.Value(0)
    const handleScroll = Animated.event(
        [{ nativeEvent: { contentOffset: { y: opacity } } }],
        { useNativeDriver: true }
    )

    return (
        <>
            <Animated.View style={{
                ...styles.head,
                opacity: opacity.interpolate({ inputRange: [0, 50], outputRange: [0, 1], extrapolate: 'extend' })
            }}
            >
                <Text>头部</Text>
            </Animated.View>
            <Animated.ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
                {[0, 0, 0, 0, 0, 0, 0].map((item, index) => (
                    <View style={styles.item} key={index}>
                        <Text>占位</Text>
                    </View>
                ))}
            </Animated.ScrollView>
        </>
    )
}
const styles = StyleSheet.create({
    head: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: 100,
        backgroundColor: '#2D73FF',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1,
    },
    item: {
        height: 300,
        width: "100%"
    }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React Native之Picker组件详解
Picker简介 在iOS和Android中选择器(Picker)是常见的控件之一,比如TimePickr(Android),pickerView(ios),并且这些基本控件可以实现诸如地址选择等效果。在RN开发中,系统也为我们提供Picker控件。应用如下: <Picker selectedValue={this.state.language} onValueChange={(lang) => this.setState({language: lang})}> <Picker.Item lab
xiangzhihong
2018/02/06
5.1K0
React Native之Picker组件详解
React Native技术篇—自定义Toast弹窗「建议收藏」
React Native官方文档:https://reactnative.cn/docs/getting-started/
全栈程序员站长
2022/11/08
1.6K0
React Native技术篇—自定义Toast弹窗「建议收藏」
短视频软件开发,实现搜索栏逐渐过渡动画
以上就是短视频软件开发,实现搜索栏逐渐过渡动画相关的代码, 更多内容欢迎关注之后的文章
yunbaokeji柯基
2020/12/16
5380
短视频软件开发,实现搜索栏逐渐过渡动画
【React Native 安卓开发】----(View实战之仿携程)【第三篇】
如图:我们可以想到先做三个View 这三个View使用FlexBox平分,flex都为1,这里的flex其实就相当于安卓里面的weight权重的概念。
先知先觉
2019/01/21
6010
React Native仿美团下拉菜单
在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使用React Native开发上面的效果,需
xiangzhihong
2018/01/26
5.4K0
React Native动画详解
在移动开发中,动画是提高用户体验不可缺少的一个元素。在React Native中,动画API提供了一些现成的组件:Animated.View,Animated.Text和Animated.Image默认支持动画。动画API会调用iOS或者Android的本地代码来完成这些组件的位移、大小等动画。 在React Native中,Animated创建过程如下: 创建Animated.Value,设置初始值,比如一个视图的opacity属性,最开始设置Animated.Value(0),来表示动画的开始时候,视图
xiangzhihong
2018/01/26
3.7K0
react-native之ART绘图详解
背景 在移动应用的开发过程中,绘制基本的二维图形或动画是必不可少的。然而,考虑到Android和iOS均有一套各自的API方案,因此采用一种更普遍接受的技术方案,更有利于代码的双平台兼容。 art是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上,Facebook又开发了react-art ,封装art,使之可以被react.js所使用,即实现了前端的svg库。然而,考虑到react.js的JSX语法,已经支持将 等等svg标签直接插入到dom中(当然此时使用的就不是react
xiangzhihong
2018/01/26
4.3K0
react-native 动画笔记 && 监听
一个常用的调用此API的办法是调用LayoutAnimation.configureNext(config),然后调用setState。
conanma
2021/05/10
1.4K0
ReactNative之结合具体示例来看RN中的的Timing动画
今天继续更新RN相关的博客。上篇博客详细的聊了RN中关于Flex布局的相关东西,具体请参见《ReactNative之参照具体示例来看RN中的FlexBox布局》。本篇博客继续更新RN的动画部分,博客中的内容依然是依托于具体的示例来进行的。
lizelu
2018/12/24
1.3K0
移动跨平台ReactNative动画组件Animated【14】
而有生命的物体,会有各种动作,可以从一个地方走到另一个地方,可以模仿其它动物,会吃,会喝,会睡觉。
江一铭
2022/06/17
9890
React实现动画效果
流畅、有意义的动画对于移动应用用户体验来说是非常必要的。和React Native的其他部分一样,动画API也还在积极开发中,不过我们已经可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更精细的交互控制的动画Animated。 Animated Animated库使得开发者可以非常容易地实现各种各样的动画和交互方式,并且具备极高的性能。Animated仅关注动画的输入与输出声明,在其中建立一个可配置的变化函数,然后使用简单的start/stop方法来控制动画按顺序执行
xiangzhihong
2018/02/05
4.3K0
React实现动画效果
React-Native踩坑记录二
(1)在外面包裹一层View,对View组件使用borderRadius就可以了,这是我的做法
啦啦啦321
2020/06/19
1.1K0
RN项目第二节 -- 首页实现
一、微组件的封装 每个页面的导航都会有不同的样式或者图片,为了实现代码的复用性,可以将导航统一封装成一个微小组件。 封装的Item需要有可点击事件,需要显示文字和图片。 import React,
谦谦君子修罗刀
2018/06/19
6.8K0
React Native学习笔记(三)—— 样式、布局与核心组件
React Native 有一个内置的命令行界面,你可以用它来生成一个新项目。您可以使用 Node.js 附带的 访问它,而无需全局安装任何内容。让我们创建一个名为“AwesomeProject”的新 React Native 项目:npx
张果
2023/04/12
15.1K0
React Native学习笔记(三)—— 样式、布局与核心组件
React-Native 版高仿淘宝、京东商城首页、商品分类页面
高仿淘宝、京东等商城首页、商品分类页面,正在做商城项目的同学有福啦,看看是你们想要的效果吗?
子晋
2022/01/18
3.4K0
React-Native 版高仿淘宝、京东商城首页、商品分类页面
React Native之ScrollView控件详解
概述 ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,使用ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。 所以,要给一个ScrollView确定一个高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{flex:1}都会导致错误。 Scroll
xiangzhihong
2018/02/05
6.1K0
React Native之ScrollView控件详解
React Native UI界面还原,组件布局与动画效果
写React Native UI和写 Android XML layout 布局 ,个人感觉是大同小异
周陆军博客
2023/04/09
5.1K0
React Native跨平台开发实战:从零到一
最近在学习React Native跨平台开发,从零开始如何开发第一个基础应用并打包发布:
天涯学馆
2024/06/02
7170
React Native使用Modal自定义分享界面
在很多App中都会涉及到分享,React Native提供了Modal组件用来实现一些模态弹窗,例如加载进度框,分享弹框等。使用Modal搭建分析的效果如下: 自定义的分析界面代码如下: S
xiangzhihong
2018/02/06
1.9K0
React Native使用Modal自定义分享界面
RN实现ListView
(1)实现单个item import React, {Component, PropTypes} from 'react'; import { AppRegistry, StyleSheet, Text, View, Dimensions, Platform, Image } from 'react-native'; const {width, height} = Dimensions.get('window'); export default c
提莫队长
2018/05/18
1.3K0
相关推荐
React Native之Picker组件详解
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验