美文网首页
react-navigation

react-navigation

作者: 以德扶人 | 来源:发表于2017-07-13 14:13 被阅读37次

这里只列举一些导航的设置属性

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('导航栏切换结束'); }  // 回调
};

相关文章

网友评论

      本文标题:react-navigation

      本文链接:https://www.haomeiwen.com/subject/himwhxtx.html