重写react-navigation的stackNaviagtor产生的默认导航栏header样式
主要是默认的stackNavigator产生的效果,很难看
重写这个阴影,在当前路由配置的 navigationOptions里的 headerStyle写样式
navigationOptions:{
headerTitle:'是什么',
headerStyle:{
shadowOffset: {width: 0, height: 0},
shadowColor: '#1a505050',
shadowRadius: 2, //阴影模糊半径
shadowOpacity: 1, // 阴影不透明度
//让安卓拥有灰色阴影 --- 必须
elevation: 1,
},
}

事实上真的挺漂亮的, 这段代码代码应该直接放在路由的 navigationOption里面 ,而不是公用的defaultNavigationOptions,否则效果就不对
补充一下2019年12月3日
需求是这样的,微信上的tabBar栏,点击下面四个图标,每一页最上面,都有一个导航栏,微信的那个是“微信(7)、通讯录、发现”,我也需要一个默认导航栏,我上面是在Stack Navigator默认导航栏那里修改的,那纯手写,应该怎么写呢,我开始以为很难,直到写出效果才知道,好简单
import React from 'react'
import {Text,View,StyleSheet,Image} from 'react-native'
// 测试换行
export default class App extends React.Component{
render(){
return (
<View style={{flex:0,justifyContent:'center'}}>
<View style={styles.companyTitleBox}>
<Text style={styles.companyTitle}>陪伴</Text>
</View>
</View>
)
}
} let styles = StyleSheet.create({
companyTitleBox:{
width:"100%",height:48.5,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#fff',
shadowColor: 'red',//#1a505050
shadowOffset:{width: 0,height: 1},
shadowOpacity: 1,
shadowRadius: 2,//模糊半径
elevation: 0.5, //这个决定阴影的大小
},
companyTitle:{
fontSize: 19, //20-1
letterSpacing: 4,
color: '#3b3b3b'
},
})
粘贴一下效果
重写react-navigation的stackNaviagtor产生的默认导航栏header样式的更多相关文章
- 【React -- 9/100】 抽离顶部导航栏 - [组件复用]
今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...
- Facebook力推导航库:React Navigation使用详解
本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍 今年1月份,新开源的react- ...
- React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈
React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...
- React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)
摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...
- [RN] 04 - React Navigation
react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
- react navigation goBack()返回到任意页面(不集成redux) 一
方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...
- react-native 学习 ----- React Navigation
很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...
- react-native导航器 react navigation 介绍
开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...
随机推荐
- 【实验】B站资源免费下载技巧you-get
搭建环境, python pip3 install you-get 查看可以下载格式 you-get -i https://www.bilibili.com/video/BV1yN411d7KH?p ...
- Keil5 STM32 C++开发 ARM V6编译器的使用教程
Keil5更新之后,开始支持ARM V6编译器,新版本的编译器对C++有了更多的支持,在编译方面也做了很多的改善,具体的没有详细了解,本文只是对STM32 开发下,使用V6版本的编译器进行STM32的 ...
- c# Winform 缓动动画
一.定义缓动动画类public class AnimationHelper { Timer animationTimer = new Timer(); double velocity = 0.0; P ...
- 高斯判别分析GDA推导与代码实现
高斯判别分析GDA推导与代码实现 生成学习 处理分类问题,我们可以使用逻辑回归.Softmax.这两种方法都属于"判别学习",也就是给定 \((x^{(i)}, y^{(i)})\ ...
- 「postOI」Lost Array
题意 有一个序列 \(A=\{a_1, a_2, ..., a_n\}\),按如下方式构造一个 \((n + 1) \times (n + 1)\) 的矩阵 \(B\): \(B_{i0}=0\)(\ ...
- Nginx/1.13.3热升级1.21.6
背景: 根据其服务器响应标头,安装的 nginx 版本为低于 1.16.1 的 1.9.5,或是低于 1.17.3 的 1.17.x.因此,它受到多种拒绝服务漏洞的影响: - HTTP/2 协议堆栈中 ...
- linux 动态库、静态库
库:可执行的二进制代码,不可以独立执行(没有main函数入口) 库是否兼容:取决于编译器.汇编器.链接器 linux链接静态库(.a):将库中用到的函数的代码指令,写入到可执行文件中.运行时无依赖 l ...
- pip python的包成功,但是import的时候报错
今天,一位同学线上反馈import python包失败了,同时附带两张图: 图1.报错代码 图2.报错提示 结合上面两个图片,我们发现这个同学import全部失败,初步怀疑该同学的本地环境上没有num ...
- nginx,git,maven面试题
1.简述一下什么是Nginx,它有什么优势和功能? Nginx是一个web服务器和方向代理服务器,用于HTTP.HTTPS.SMTP.POP3和IMAP协议.因 它的稳定性.丰富的功能集.示例配置文件 ...
- scrapy中发送post请求
1.可以使用`yield scrapy.FormRequest(url,formdata,callback)`方法发送POST请求. 其中构造参数formdata可以是字典,也可以是可迭代的(key, ...