[RN] React Native 自定义导航栏随滚动渐变

 React Native 自定义导航栏随滚动渐变

 

实现效果预览:

 

 

代码实现:

1、定义导航栏 NavPage.js

import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, TouchableOpacity, Platform, Dimensions} from 'react-native';/*** 自定义导航栏*/
let height = (Platform.OS === 'ios' ? 20 : 0) + 90export default class NavPage extends Component {static defaultProps = {title: 'title',};render() {let {title} = this.props;return (<View style={styles.container}><TouchableOpacity style={styles.item} onPress={() => {alert('返回')}}><Image style={styles.icon} source={require('./arrow.png')}/></TouchableOpacity><View style={{alignItems: 'center', flex: 1}}><Text style={{color: '#FFF', fontSize: 17}}>{title}</Text></View><TouchableOpacity style={styles.item} onPress={() => {alert('更多')}}><Image style={[styles.icon, {width: 25, height: 5}]} source={require('./more.png')}/></TouchableOpacity></View>);}
}const styles = StyleSheet.create({container: {width: Dimensions.get('window').width,height: height,flexDirection: 'row',alignItems: 'center',justifyContent: 'space-between',paddingTop: Platform.OS === 'ios' ? 20 : 0,paddingHorizontal: 10,position: 'absolute',},icon: {width: 21,height: 21,color: "white",},item: {height: 30,width: 30,justifyContent: 'center',alignItems: 'center'}
});

 

调用实现:

import React, {Component} from 'react'
import {StyleSheet,Text,View,ListView,Image,Dimensions,TextInput
} from 'react-native'
import NavPage from "./NavPage";const {width} = Dimensions.get('window')export default class TestMyNav extends Component<{}> {constructor(props) {super(props)this.navBar = nullthis.renderRow = this.renderRow.bind(this)this.renderHeader = this.renderHeader.bind(this)this.state = {dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})}}renderRow(rowData, sectionId, rowId) {return (<Viewstyle={{height: 100, justifyContent: 'center', borderWidth: 1, borderColor: 'red'}}key={rowId}><Text style={{marginHorizontal: 10}}>{`这时第:${rowId}行`}</Text></View>)}renderHeader() {return (<View><Image style={{height: 200, width: width}}source={{uri: 'https://upload.jianshu.io/users/upload_avatars/2174847/35584aef-dcac-46c0-9280-67a3b1ebb2c9.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96'}}resizeMode={'cover'}/></View>)}_onScroll(event) {let y = event.nativeEvent.contentOffset.ylet opacityPercent = y / 200if (y < 200) {this.navBar.setNativeProps({style: {opacity: opacityPercent}})} else {this.navBar.setNativeProps({style: {opacity: 1}})}}render() {let dataSource = this.state.dataSource.cloneWithRows([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])return (<View style={styles.container}><ListViewonScroll={this._onScroll.bind(this)}bounces={false}dataSource={dataSource}renderRow={this.renderRow}renderHeader={this.renderHeader}/><Viewref={ref => this.navBar = ref}style={[styles.navBar, {opacity: 0}]}><NavPage title={'详情页'}/></View></View>)}
}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},navBar: {height: 64,width: width,position: 'absolute',justifyContent: 'center',alignItems: 'center',backgroundColor: '#FA0016',},navContent: {marginTop: 20,height: 44,width: width,flexDirection: 'row',alignItems: 'center',justifyContent: 'space-between',paddingHorizontal: 15},searchBar: {justifyContent: 'center',paddingHorizontal: 10,borderTopLeftRadius: 12,borderBottomLeftRadius: 12,borderTopRightRadius: 12,borderBottomRightRadius: 12,flex: 1,height: 25,backgroundColor: 'white',marginHorizontal: 15}
})

 

红色部分为核心代码

 

参考:

https://github.com/guangqiang-liu/react-native-gradientNavigationBarDemo

 

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/11020748.html

转载请著名出处!谢谢~~

 

转载于:https://www.cnblogs.com/wukong1688/p/11020748.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/393260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【CSS 技能提升】 :before和:after的使用

前几天的晚上较全面的去看了下css的一些文档和资料&#xff0c;大部分的样式运用都没什么大问题了&#xff0c;只是有些许较陌生&#xff0c;但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多&#xff0c;主要是针对:before和:after写一些内容&a…

成功试验基于C#/.NET的Android开发

今天最开心事情莫过于摸索验证了一个事情&#xff0c;C#也能进行Android和IOS开发&#xff0c;白天安装了开发环境&#xff0c;晚上进行测试&#xff0c;直到此时此刻&#xff0c;已经成功的导出一款基于C#/.NET的安卓APK&#xff0c;并且能够成功的导入到安卓手机运行&#xf…

深入理解了MySQL,你才能说熟悉数据库

先抛出几个问题 1.为什么不建议使用订单号作为主键?2.为什么要在需要排序的字段上加索引?3.for update 的记录不存在会导致锁住全表?4.redolog 和 binlog 有什么区别?5.MySQL 如何回滚一条 sql ?6.char(50) 和 varchar(50) 效果是一样的么?索引知识回顾 对于 MySQL 数据库…

网站QQ全屏PHP代码,QQ技术导航升级版 超级导航美化版带后台版 PHP源码

QQ技术导航升级版 超级导航美化版带后台版改进F2样式&#xff0c;主针对QQ教程网、卡盟、博客、提供更好收录的位置。改进QQ技术导航背景&#xff0c;增加整体美观效果。去掉死链页面&#xff0c;站长操作使用更加有扩大空间。优化后台登陆界面&#xff0c;去掉织梦后台携带的广…

MySQL基础操作(一)

MySQL操作 一、创建数据库 # utf-8 CREATE DATABASE 数据库名称 DEFAULT CHARSET utf8 COLLATE utf8_general_ci;# gbk CREATE DATABASE 数据库名称 DEFAULT CHARACTER SET gbk COLLATE gbk_chinese_ci; 二、用户管理 创建用户create user 用户名IP地址 identified by 密码; 删…

集合框架05

一、HashSet集合 1 public class Demo01 {2 /*3 * Set接口&#xff0c;特点不重复元素&#xff0c;没索引4 * Set接口的实现类&#xff0c;HashSet(哈希表)5 * 特点&#xff1a;无序集合&#xff0c;存储和取出的顺序不同&#xff0c;没有索引&#xff0c;不…

HIVE-分桶表的详解和创建实例

我们学习一下分桶表&#xff0c;其实分区和分桶这两个概念对于初学者来说是比较难理解的。但对于理解了的人来说&#xff0c;发现又是如此简单。 我们先建立一个分桶表&#xff0c;并尝试直接上传一个数据 create table student4(sno int,sname string,sex string,sage int, sd…

51nod1270(dp)

题目链接&#xff1a;http://www.51nod.com/onlineJudge/questionCode.html#!problemId1270 题意&#xff1a;中文题诶&#xff5e; 思路&#xff1a;dp sabs(a1-a0)abs(a2-a1).... 要使s尽量大&#xff0c;需要让abs(ai-ai-1)尽量大&#xff0c;那么可以让其中一个尽量小&…

Windows IIS 日志分析研究(Log Parser Log Parser Lizard Log Parser Studio) update...

Windows主要有以下三类日志记录系统事件&#xff1a;应用程序日志、系统日志和安全日志。 存放目录&#xff1a;X:\Windows\System32\winevt\Logs\ System.evtx 系统日志 Application.evtx 应用程序日志 Security.evtx 安全日志 审核策略与事件查看器 # 管理工具 → 本地安全…

Linux邮件系统整合windows 2008 R2 AD域认证更新

1. 安装只要执行install.sh即可。&#xff08;安装包约40几M&#xff09; 2.文档更新功能 &#xff08;原v1.0文档链接&#xff1a;http://godoha.blog.51cto.com/108180/691376&#xff09; 本文转自 godoha 51CTO博客&#xff0c;原文链接&#xff1a;http://blog.51cto.com/…

HTTP 协议 -- 浏览器缓存机制

浏览器缓存机制浏览器缓存机制主要是 HTTP 协议定义的缓存机制。HTTP 协议中有关缓存的缓存信息头的关键字有 Cache-Control&#xff0c;Pragma&#xff0c;Expires&#xff0c;Last-Modified/ETag 等。浏览器请求流程浏览器第一请求流程&#xff1a;浏览器再次请求流程&#x…

CAP理论的理解

CAP理论作为分布式系统的基础理论,它描述的是一个分布式系统在以下三个特性中&#xff1a; 一致性&#xff08;Consistency&#xff09;可用性&#xff08;Availability&#xff09;分区容错性&#xff08;Partition tolerance&#xff09;最多满足其中的两个特性。也就是下图所…

开启真我新格调 期待绚丽的未知

我们每天都在朝幸福努力着&#xff0c;而眼光看的太远&#xff0c;往往会忘记自己究竟要的是什么。人想要幸福&#xff0c;就得活出真我&#xff0c;当人不能放心大胆地活出自己时&#xff0c;内心会有不安和痛苦。为何要隐藏真正的自己?外界的评判真的那么重要?真我新格调&a…

Linux-RHEL5-初学者配置vsftpd注意事项

我安装的是RHEL5.4&#xff0c;初学&#xff0c;不在意版本。为了学习方便&#xff0c;安装操作系统时能选的选项都选全了。事实证明这个决策是正确滴&#xff0c;要不还得花时间学习怎么安装vsftp。 网上关于如何配置vsftpd的资料挺多的。 我花了小半天的时间&#xff0c;除了…

最小值的最优化问题

无约束极小值的最优化条件&#xff1a; 关于多元函数极小值点的必要条件&#xff1a; 满足的点称之为f(x)的驻点或稳定点&#xff0c;但是反过来&#xff0c;满足梯度条件的点不一定是f(x)的局部极小值。因此&#xff0c;定理转化为求解下面的方程组问题&#xff1a; 对于上面…

第2课 - 搭建Lua开发环境

第2课 - 搭建Lua开发环境 1. Lua 的优点 &#xff08;1&#xff09;Lua 使用标准的 ANSI C 进行开发&#xff0c;可以无缝集成到宿主程序&#xff0c;且几乎支持所有平台。 &#xff08;2&#xff09;Lua 是开源且免费的软件&#xff0c;以源码的方式直接发布。开源软件的发布方…

(私人收藏)python学习(游戏、爬虫、排序、练习题、错误总结)

python学习(游戏、爬虫、排序、练习题、错误总结) https://pan.baidu.com/s/1dPzSoZdULHElKvb57kuKSgl7bz python100经典练习题python-错误和异常小结python-大作业之五子棋游戏&#xff08;附代码&#xff09;python-网络爬虫几种排序方法python实现新手常见的python运行时错误…

MySQL性能指标及计算方法

MySQL性能指标及计算方法 绝大多数MySQL性能指标可以通过以下两种方式获取&#xff1a; &#xff08;1&#xff09;mysqladmin 使用mysqladmin extended-status命令获得的MySQL的性能指标&#xff0c;默认为累计值。如果想了解当前状态&#xff0c;需要进行差值计算&#xff1b…

php可变变量讲解,PHP可变变量实例详解

什么是可变变量&#xff1f;在PHP中有一个其他类型的变量&#xff0c;“可变变量”。可变变量是一种PHP独特的变量&#xff0c;他允许动态改变一个变量的名称。可变变量的工作原理这个特性的工作原理是用一个变量的值作为另一个变量的名称。例如&#xff0c;我们可以设置$str的…

Python自动化运维:Django之View视图和Template

views详解 http请求中产生两个核心对象&#xff1a; http请求&#xff1a;HttpRequest对象 http响应&#xff1a;HttpResponse对象 &#xff08;1&#xff09; HttpRequest对象 当请求一个页面时&#xff0c;Django 创建一个 HttpRequest对象包含原数据的请求。然后 Django 加载…