这里只列举一些导航的设置属性
Screen Navigation Options
title
String that can be used as a fallback for headerTitle
and tabBarLabel
header
React Element or a function that given HeaderProps
returns a React Element, to display as a header. Setting to null
hides header.
headerTitle
String or React Element used by the header. Defaults to scene title
headerBackTitle
Title string used by the back button on iOS or null
to disable label. Defaults to scene title
headerTruncatedBackTitle
Title string used by the back button when headerBackTitle
doesn't fit on the screen. "Back"
by default.
headerRight
React Element to display on the right side of the header
headerLeft
React Element to display on the left side of the header
headerStyle
Style object for the header
headerTitleStyle
Style object for the title component
headerBackTitleStyle
Style object for the back title
headerTintColor
Tint color for the header
headerPressColorAndroid
Color for material ripple (Android >= 5.0 only)
gesturesEnabled
Whether you can use gestures to dismiss this screen. Defaults to true on iOS, false on Android.
const stackNavigatorConfiguration = {
initialRouteName: 'Main',
navigationOptions: {
headerBackTitle:'返回',
headerTintColor: 'white',
headerStyle:{
backgroundColor: Colors.themeColor
},
gesturesEnabled: true,
headerMode: 'screen',
//headerLeft:<Text>返回</Text>
},
mode: 'card', // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
// //onTransitionStart: ()=>{ console.log('导航栏切换开始'); }, // 回调
// //onTransitionEnd: ()=>{ console.log('导航栏切换结束'); } // 回调
};
