接着上篇react-native-navigation步步深入之导航篇
，这篇接着聊一下react-native-navigation的配置项。所有的配置项基本上就是下述这么多。
{
// Common
navBarTextColor: '#000000', // 头部导航标题文字颜色
navBarTextFontSize: 18, // 头部导航标题文字大小
navBarTextFontFamily: 'font-name', // 头部导航标题文字字体类型
navBarBackgroundColor: '#f7f7f7', // 头部导航背景颜色
navBarCustomView: 'example.CustomTopBar', // 可以用其他组件替代默认的头部
navBarComponentAlignment: 'center', // center/fill
navBarCustomViewInitialProps: {}, // Serializable JSON passed as props
navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
navBarHidden: false, // make the nav bar hidden
navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
navBarTransparent: false, // make the nav bar transparent, works best with drawUnderNavBar:true,
navBarNoBorder: false, // hide the navigation bar bottom border (hair line). Default false
drawUnderNavBar: false, // draw the screen content under the nav bar, works best with navBarTranslucent:true
drawUnderTabBar: false, // draw the screen content under the tab bar (the tab bar is always translucent)
navBarBlur: false, // blur the entire nav bar, works best with drawUnderNavBar:true
tabBarHidden: false, // make the screen content hide the tab bar (remembered across pushes)
statusBarHidden: false, // make the status bar hidden regardless of nav bar state
statusBarTextColorScheme: 'dark', // text color of status bar, 'dark' / 'light' (remembered across pushes)
navBarSubtitleColor: 'red', // subtitle color
navBarSubtitleFontFamily: 'font-name', // subtitle font
screenBackgroundColor: 'white', // Default screen color, visible before the actual react view is rendered
orientation: 'portrait' // Sets a specific orientation to a modal and all screens pushed to it. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
disabledButtonColor: '#ff0000' // chnaged the navigation bar button text color when disabled.
// iOS only
statusBarTextColorSchemeSingleScreen: 'light', // same as statusBarTextColorScheme but does NOT remember across pushes
statusBarHideWithNavBar: false, // hide the status bar if the nav bar is also hidden, useful for navBarHidden:true
statusBarBlur: false, // blur the area under the status bar, works best with navBarHidden:true
disabledBackGesture: false, // default: false. Disable the back gesture (swipe gesture) in order to pop the top screen.
disabledSimultaneousGesture: true, // default: true. Disable simultaneous gesture recognition.
screenBackgroundImageName: '', // Optional. default screen background image.
rootBackgroundImageName: '', // Static while you transition between screens. Works best with screenBackgroundColor: 'transparent'
navBarButtonFontSize: 20, // Change font size nav bar buttons (eg. the back button) (remembered across pushes)
navBarButtonFontWeight: '500', // Change font weight nav bar buttons (eg. the back button) (remembered across pushes)
navBarLeftButtonFontSize: 17, // Change font size of left nav bar button
navBarLeftButtonColor: 'red', // Change color of left nav bar button
navBarLeftButtonFontWeight: '400', // Change font weight of left nav bar button
navBarRightButtonFontSize: 17, // Change font size of right nav bar button
navBarRightButtonColor: 'blue', // Change color of right nav bar button
navBarRightButtonFontWeight: '600', // Change font weight of right nav bar button
// Android only
navigationBarColor: '#000000', // change the background color of the bottom native navigation bar.
navBarTitleTextCentered: true, // default: false. centers the title.
topBarElevationShadowEnabled: false, // default: true. Disables TopBar elevation shadow on Lolipop and above
statusBarColor: '#000000', // change the color of the status bar.
collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.
collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image.
collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color.
navBarTextFontBold: false, // Optional. Set the title to bold.
navBarHeight: 70, // Optional, set the navBar height in pixels.
topTabsHeight: 70, // Optional, set topTabs height in pixels.
topBarBorderColor: 'red', Optional, set a flat border under the TopBar.
topBarBorderWidth: 5.5, // Optional, set the width of the border.
}
参数什么的都有了，接下里就是怎样在项目中引用，一般情况我会分成两种情况来设置，那种公共的例如tab一般是不会改变的，我就写在App.js里面，有一些，比图topBar有可能会涉及到变颜色或者button个数不一样，这种我就会写在各自的组件文件里面。
App.js
Navigation.startTabBasedApp({
tabs: [
{
label: '首页',
screen: 'app.HomeScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav1.png'),
selectedIcon: require('./src/assets/images/nav1_active.png'), // iOS only
title: '首页'
},
{
label: '客户管理',
screen: 'app.OfferScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav2.png'),
selectedIcon: require('./src/assets/images/nav2_active.png'), // iOS only
title: '客户管理'
},
{
label: '车险报价',
screen: 'app.CustomerScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav3.png'),
selectedIcon: require('./src/assets/images/nav3_active.png'), // iOS only
title: '车险报价'
},
{
label: '我的',
screen: 'app.MeScreen',
icon: require('./src/assets/images/nav4.png'),
selectedIcon: require('./src/assets/images/nav4_active.png'), // iOS only
title: '我的'
}
],
// add
appStyle: {
/*nav */
navBarBackgroundColor: '#FBFBFB',
navBarTextColor: '#999',
navBarTextFontSize: 16,
navBarTitleTextCentered: true,
topBarElevationShadowEnabled: false,
/*tab */
tabBarBackgroundColor:'#FBFBFB',
forceTitlesDisplay: true,
tabBarButtonColor: '#999',
tabBarSelectedButtonColor: '#DD4F43',
/*screen */
screenBackgroundColor: '#fff',
keepStyleAcrossPush: false,
navBarNoBorder: true,
topBarBorderColor: '#f5f5f5',
topBarBorderWidth: 1.5,
statusBarTextColorScheme: 'dark',
navBarCustomView: 'CustomButton'
}
});
最终结果如下：
Video_2017-10-18_161533.gif
可以看到每次点击tab的时候navbar都会有短暂的黑屏，并且状态栏还是黑不溜秋的，都android8了，真心不想看到这条黑色的，但是想尽各种方法都解决不了沉浸式状态栏，最后迫不得已只有把react-native-navigation的navbar隐藏起来，然后加上statusBar透明，自己写了个navbar组件，这样既没有黑屏也没有大黑条，当然，如果有小伙伴还有其他解决方式，请留言！