zoukankan      html  css  js  c++  java
  • 重写react-navigation的stackNaviagtor产生的默认导航栏header样式

    主要是默认的stackNavigator产生的效果,很难看


    重写这个阴影,在当前路由配置的 navigationOptions里的 headerStyle写样式

    navigationOptions:{
                    headerTitle:'是什么',
                    headerStyle:{
                        shadowOffset: { 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:{
            "100%",height:48.5,
            justifyContent:'center',
            alignItems:'center',
            backgroundColor:'#fff',
            shadowColor: 'red',//#1a505050
            shadowOffset:{ 0,height: 1},
            shadowOpacity: 1,
            shadowRadius: 2,//模糊半径
            elevation: 0.5, //这个决定阴影的大小
          },
          companyTitle:{
            fontSize: 19, //20-1
            letterSpacing: 4,
            color: '#3b3b3b'
          },
    })
    
     

    粘贴一下效果

  • 相关阅读:
    策略梯度(Policy Gradient)
    无约束优化问题
    有约束优化问题
    计算机网络学习资料
    为什么要用等效基带信号?
    通信网实验—话务量分析
    无感数据埋点(自定义注解+aop+异步)
    排序算法
    位运算常见操作
    数据库与缓存一致性的几种实现方式
  • 原文地址:https://www.cnblogs.com/tengyuxin/p/11928323.html
Copyright © 2011-2022 走看看