重寫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'
      },
})

粘貼一下效果

posted @ 2019-11-25 15:55 tengyuxin 閱讀(723) 評論(0) 收藏舉報

刷新頁面返回頂部

tengyuxin

做自己認為正確的事

重寫react-navigation的stackNaviagtor產生的默認導航欄header樣式

公告