react-native 标题随页面滚动显示和隐藏
效果图如下:
代码实现:
import React, {Component} from 'react';
import {
ScrollView,
Text,
View,
FlatList,
} from 'react-native';
export default class Home extends Component {
state = {
dataObj: [
{dat: 123},
{dat: 123},
{dat: 123},
{dat: 123},
{dat: 123},
{dat: 123},
{dat: 123},
{dat: 123},
{dat: 123},
{dat: 123},
],
};
_onScroll(event) {
let y = event.nativeEvent.contentOffset.y;
if (y < 250) {
this.refs.title.setNativeProps({
style: {
opacity: y / 250,
},
});
} else {
this.refs.title.setNativeProps({
style: {
opacity: 1,
},
});
}
}
_keyExtractor = (item, index) => index.toString();
renderItemView = ({item}) => {
return <View style={{height: 100}}>
<Text>{item.dat}</Text>
</View>;
};
render() {
return (
<View style={{flex: 1}}>
<ScrollView
scrollEventThrottle={16}
onScroll={(event) => this._onScroll(event)}
style={{flex: 1}}
>
<View style={{width: '100%', height: 300, backgroundColor: '#8aa5ff'}}/>
<FlatList
keyExtractor={this._keyExtractor}
data={this.state.dataObj}
renderItem={this.renderItemView}
/>
</ScrollView>
<View ref='title' style={{
height: 50,
width: '100%',
backgroundColor: '#4aa37c',
position: 'absolute',
top: 0,
left: 0,
justifyContent: 'center',
alignItems: 'center',
opacity: 0,
}}>
<Text style={{color: '#fff', fontSize: 18, fontWeight: 'bold'}}>主 页</Text>
</View>
</View>
);
}
}
react-native 标题随页面滚动显示和隐藏的更多相关文章
- 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
- scrollReveal.js – 页面滚动显示动画JS
简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 ...
- iOS:自定义导航栏,随着tableView滚动显示和隐藏
自定义导航栏,随着tableView滚动显示和隐藏 一.介绍 自定义导航栏是APP中很常用的一个功能,通过自定义可以灵活的实现动画隐藏和显示效果.虽然处理系统的导航栏也可以实现,但是这个是有弊端的,因 ...
- 从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...
- scrollreveal(页面滚动显示动画插件支持手机)
scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件.该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用. ...
- jquery页面滚动显示浮动菜单栏锚点定位效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- react native (1) 新建页面并跳转
新建页面 1.新建文件 import React from 'react'; import { Text } from 'react-native'; export default class tod ...
- react 执行 yarn build 页面无法显示
资源文件路径问题 如果你使用create-react-app创建项目,执行命令 yarn build 后,直接以静态方式打开build文件夹内的index.html,会看到页面显示出现问题,打开con ...
- react native tap切换页面卡顿
问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...
随机推荐
- SSM整合2(springMVC+mybatis)
客户在浏览器端会提交一些参数到服务器端,比如用户的登录等,就会传username 和 password过来,springmvc则通过参数绑定组件将请求参数的内容进行数据转换,然后将转换后的值覆给con ...
- 松软科技web课堂:JavaScript 数组
JavaScript 数组用于在单一变量中存储多个值. 实例 var cars = ["Saab", "Volvo", "BMW"]; 什么 ...
- JS Switch
JS Switch switch 语句用于基于不同的条件来执行不同的动作. switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; defa ...
- 手把手教你避开组件cover-view的那些坑
腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单.快速的构建小程序,是您实现地图功能的最佳伙伴.目前微信小程序插件提供路线规划.地铁图.地图选 ...
- 微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装(一)
在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时 ...
- Servlet 使用介绍(1)
说明 本篇介绍java web中比较重要的一个技术:servlet.servlet是一种对用户请求动态响应的一个技术,是java web的核心一环.对于一般服务性质的纯后台服务应用而言,或许整个应用是 ...
- ABP入门教程14 - 更新多语言
点这里进入ABP入门教程目录 设置语种 新增语种 数据库操作 打开多语言表AbpLanguages,添加一条记录. 程序操作 在基础设施层(即JD.CRS.EntityFrameworkCore)的\ ...
- ubuntu下需要补充安装 manpages手册; 安装linux 社区最新的linux manpages 文档;
使用man手册的方式,能大大加快开发速度,可能安装的时候有些安装不完整,下面结合网络上搜索信息进行补充: $ sudo apt-get install manpages $ sudo apt-get ...
- Acwing40. 顺时针打印矩阵
地址 https://www.acwing.com/solution/acwing/content/3623/ 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字. 样例 输入: [ [, ...
- vivado2017.1和modelsim10.5联合仿真
vivado2017.1和modelsim版本 vivado可在xilinx官网查询匹配的modelsim最低版本,下载modelsim前记得选用合适的版本号,如图 查询地址:https://www. ...