效果图如下:

代码实现:

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'}}>主&nbsp;页</Text>
</View>
</View>
);
}
}

react-native 标题随页面滚动显示和隐藏的更多相关文章

  1. 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

    Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...

  2. scrollReveal.js – 页面滚动显示动画JS

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的  JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是  WOW.js  的动画只播放一次,而 ...

  3. iOS:自定义导航栏,随着tableView滚动显示和隐藏

    自定义导航栏,随着tableView滚动显示和隐藏 一.介绍 自定义导航栏是APP中很常用的一个功能,通过自定义可以灵活的实现动画隐藏和显示效果.虽然处理系统的导航栏也可以实现,但是这个是有弊端的,因 ...

  4. 从零学React Native之03页面导航

    之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...

  5. scrollreveal(页面滚动显示动画插件支持手机)

    scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件.该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用. ...

  6. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. react native (1) 新建页面并跳转

    新建页面 1.新建文件 import React from 'react'; import { Text } from 'react-native'; export default class tod ...

  8. react 执行 yarn build 页面无法显示

    资源文件路径问题 如果你使用create-react-app创建项目,执行命令 yarn build 后,直接以静态方式打开build文件夹内的index.html,会看到页面显示出现问题,打开con ...

  9. react native tap切换页面卡顿

    问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...

随机推荐

  1. SSM整合2(springMVC+mybatis)

    客户在浏览器端会提交一些参数到服务器端,比如用户的登录等,就会传username 和 password过来,springmvc则通过参数绑定组件将请求参数的内容进行数据转换,然后将转换后的值覆给con ...

  2. 松软科技web课堂:JavaScript 数组

    JavaScript 数组用于在单一变量中存储多个值. 实例 var cars = ["Saab", "Volvo", "BMW"]; 什么 ...

  3. JS Switch

    JS Switch switch 语句用于基于不同的条件来执行不同的动作. switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; defa ...

  4. 手把手教你避开组件cover-view的那些坑

    腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单.快速的构建小程序,是您实现地图功能的最佳伙伴.目前微信小程序插件提供路线规划.地铁图.地图选 ...

  5. 微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装(一)

    在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时 ...

  6. Servlet 使用介绍(1)

    说明 本篇介绍java web中比较重要的一个技术:servlet.servlet是一种对用户请求动态响应的一个技术,是java web的核心一环.对于一般服务性质的纯后台服务应用而言,或许整个应用是 ...

  7. ABP入门教程14 - 更新多语言

    点这里进入ABP入门教程目录 设置语种 新增语种 数据库操作 打开多语言表AbpLanguages,添加一条记录. 程序操作 在基础设施层(即JD.CRS.EntityFrameworkCore)的\ ...

  8. ubuntu下需要补充安装 manpages手册; 安装linux 社区最新的linux manpages 文档;

    使用man手册的方式,能大大加快开发速度,可能安装的时候有些安装不完整,下面结合网络上搜索信息进行补充: $ sudo apt-get install manpages $ sudo apt-get ...

  9. Acwing40. 顺时针打印矩阵

    地址 https://www.acwing.com/solution/acwing/content/3623/ 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字. 样例 输入: [ [, ...

  10. vivado2017.1和modelsim10.5联合仿真

    vivado2017.1和modelsim版本 vivado可在xilinx官网查询匹配的modelsim最低版本,下载modelsim前记得选用合适的版本号,如图 查询地址:https://www. ...