react-navigation之 StackNavigator

react-navigation 之 StackNavigator

npm install --save react-navigation

控件主要分为三种:

  1. StackNavigator :类似于普通的Navigator,屏幕上方导航栏
  2. TabNavigator:obviously, 相当于iOS里面的TabBarController,屏幕下方标签栏
  3. DrawerNavigator:抽屉效果,左侧滑出这种效果。

StackNavigator

使用方法

以下数据可以全局设置也可以单独配置

  1. 初始化
    • StarkNavigator(routeConfigMap,stackConfig)
      routeConfigMap所有跳转的routeName 都在这配置 默认取第一个route
      stackConfig 使用页面的配置(TitleBar 都可以在这里统一配置)
  2. 跳转
    • 通过 this.props.navigation.navigate 获取 navigator
    • 调用 navigator(routName,params)进行跳转

例子:

   const Nav = StackNavigator({
       Launch: {
           screen: HomeScreen
       },
       NavTitle: {
           screen: NavTitle
       },
       TabNav: {
           screen: MainScreenNavigator
       },
       Touchable: {screen: Touchable}
   }, {
       initialRouteName: 'Launch',
       initialRouteParams: { //Launch 初始化参数
           param: '初始化',
           user: 'zoudong'
       },
       navigationOptions: {
           headerTintColor: 'red', //返回键颜色,title 颜色
           headerRight: <Text onPress={() => {
               alert('点击了title Right')
           }}>Right</Text>,
           headerTitle: <Text
               style={{
                   backgroundColor: 'red',
                   alignSelf: 'center',
                   textAlignVertical: 'center'
               }}
               onPress={() => {
                   alert('点击了title Title')
               }}> 全局Title</Text>,
           headerStyle: { /
               backgroundColor: "white"
           },
           headerTitleStyle: {
               alignSelf: 'center'
           }
       },
       mode: 'card'
   });

   export default Nav;

参数说明

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs(第一个参数)

    export type NavigationRouteConfigMap = {
    [routeName: string]: NavigationRouteConfig<*>,

    export type NavigationRouteConfig<T> = T & {
         navigationOptions?: NavigationScreenConfig<*>,
         path?: string,
    };
};

  1. RouteConfigs 类似 Android中的Mainfest.xml
    • {routeName: NavigationRouteConfig}
    • routeName //跳转使用的 routeName
    • <spac id='navigationOptions1'/>NavigationRouteConfig : 页面的配置
      {
      • path :'app:web', //optional 当深层次关联或者在web app中使用React Navigation,使用路径

      • navigationOptions:{
        //此处设置了, 会覆盖组件内的static navigationOptions设置
        //设置个标题
        title:({state}) => ${state.params.username}'s Profile'
        } 这个可以在Component 里面单独写,它会覆盖这个

StackNavigatorConfig(第二个参数)

  1. StackNavigatorConfig
 export type StackNavigatorConfig = {
     containerOptions?: void,
    } & NavigationStackViewConfig &
        NavigationStackRouterConfig;
    
    export type NavigationStackViewConfig = {
        mode?: 'card' | 'modal',
        headerMode?: HeaderMode,
        cardStyle?: Style,
        transitionConfig?: () => TransitionConfig,
        onTransitionStart?: () => void,
        onTransitionEnd?: () => void,
    };
    export type NavigationStackRouterConfig = {
        initialRouteName?: string,
        initialRouteParams?: NavigationParams,
        paths?: NavigationPathsConfig,
        navigationOptions?: NavigationScreenConfig<NavigationStackScreenOptions>,
    };
    export type NavigationStackScreenOptions = NavigationScreenOptions & {
        header?: ?(React.Element<*> | (HeaderProps => React.Element<*>)),
        headerTitle?: string | React.Element<*>,
        headerTitleStyle?: Style,
        headerTintColor?: string,
        headerLeft?: React.Element<*>,
        headerBackTitle?: string,
        headerTruncatedBackTitle?: string,
        headerBackTitleStyle?: Style,
        headerPressColorAndroid?: string,
        headerRight?: React.Element<*>,
        headerStyle?: Style,
        gesturesEnabled?: boolean,
    };

以上可知 StackNavigatorConfig中有的字段名

  • <spac id='navigationOptions2'/>option for the route(路由选项):
    • initialRouteName -为stack设置默认的界面,必须和route configs里面的一个key匹配。
    • initialRouteParams - 初始路由的参数。
    • navigationOptions- 屏幕导航的默认选项。
    • paths-route config里面路径设置的映射。
  • Visual Option(视觉选项):
    • mode- 定义渲染(rendering)和转换(transitions)的模式,两种选项(给字符串即可):
      • card 使用标准的iOS和Android的界面切换,这是默认的。
      • modal 仅在iOS端有用,即模态出该视图。
    • headerMode 指定header应该如何被渲染,选项:
      • float 共用一个header 意思就是有title文字渐变效果。
      • screen 各用各的header 意思就是没有title文字渐变效果。
      • none 没有header。
    • cardStyle 使用该属性继承或者重载一个在stack中的card的样式。
    • onTransitionStart 一个函数,在换场动画开始的时候被激活。
    • onTransitionEnd 一个函数,在换场动画结束的时候被激活。

navigationOptions

以上有两种方式设置配置单独页面设置, 全局统一设置 还有一种方式 Component 中设置
优先级 routeConfigMap > Component > stackConfig

  static navigationOptions = {
    .....
  }
  • title- 界面的标题(string)
  • header- header bar设置对象
    1. visible - bool值,header是否可见。
    2. title-标题 String或者是一个react 节点
    3. backTitle-返回按钮在iOS平台上,默认是title的值
    4. right- react 节点显示在header右边,例如右按钮
    5. left- react 节点显示在header左边,例如左按钮
    6. style-header的style
    7. titleStyle- header的title的style (__) 嘻嘻……
    8. tintColor- header的前景色
  • cardStack- 配置card stack
    1)gesturesEnabled- 是否允许通过手势关闭该界面,在iOS上默认为true,在Android上默认为false

不同

  1. Navigator 用法有些类似 语法有点不同

例如:

 // Navigator
 const  navor=this.props.navigator;
 //StackNavigator
 const  navor=this.props.navigation.navigate;
  1. 跳转不一样

例如:

 // Navigator
   navor.push(route); //跳转
   1. 如果带参数:route={
        //component,params 是关键字
            component:xxx,
             params:{
                      id:xxx,
                }
             }
   2. 获取跳转带的参数 : this.props.id;
 //StackNavigator
   1. navor(routeName,params)
      routeName: 名称
      params:参数
      navor('Login',{userid:'xxx'})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容