react-navigation2.0版之Tab导航

本文章的版本是react-navigation 2.5.5
一般来说构建app有两种思路:
方法1:如果我的App 有几个 tab 就需要用 createStackNavigator建立几个stack,然后用一个createBottomTabNavigator包裹刚刚创建的几个stack。类似于ios原生
方法2:反过来用stack包裹一个tab和好多screen(单独的页面)
下面分别说说这两种构建:

C4451C7A-7D11-4B8F-B68E-31EC851FBB7E.png
//首页     详情页
const HomeStack = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsScreen,
});

//我的 我的设置
const MeStack = createStackNavigator({
  Me: MeScreen,
  Setting: SettingScreen,
  // Details: DetailsScreen 跨tab跳转需要额外注册
});

然后通过 createBottomTabNavigator把stack包裹

export default createBottomTabNavigator(
{
  Home: HomeStack,
  Me: MeStack,
});

这种写法有个缺点就是子页面也会存在下面的tab 而且需要在每个stack 判断一下。2.0的处理方法如下:

HomeStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible,
  };
};

如果需要夸tab跳转就额外注册,比如我要从Me 里面跳转到 Details 则需要在 MeStack 里面 设置 Details: DetailsScreen

或者你采用另外一个布局方式 stack包裹tab

const TabOptions = (tabBarTitle, tabBarIconName) => {
    const title = tabBarTitle;
    const tabBarIcon = (({tintColor,focused})=> {
        const color = focused ? CS.THEME11 : CS.COLOR4;
        if(title){
            return(
                <Icon name={tabBarIconName} size={title?FS.ICON_B:40} color={color}/>
            )
        }else {
            return(
                <FontAwesome name={tabBarIconName} size={44} color={CS.THEME11}/>
            )
        }

    });
    const tabBarVisible = true;
    return { title, tabBarIcon, tabBarVisible };
};

const MyTab = createBottomTabNavigator({
    ScreenHome: {
        screen: ScreenHome,
        navigationOptions: ()=> TabOptions('找房', 'oneIcon|icon_search'),
    },

    ScreenGroup: {
        screen: ScreenGroup,
        navigationOptions: ()=> TabOptions('圈子', 'oneIcon|icon_fenxiaoquan_light'),
    },

    ScreenAdd: { screen: ScreenAdd,
        // 这里我实现了隐藏单个文字的tab  达到了类似微博的效果我是修改了源码
        navigationOptions: ()=> TabOptions('','plus-circle'),
    },

    ScreenMessage: {
        screen: ScreenMessage,
        navigationOptions: ()=> TabOptions('消息', 'oneIcon|icon__xiaoxi'),
    },

    ScreenMe: {
        screen: ScreenMe,
        navigationOptions: ()=> TabOptions('我的', 'oneIcon|icon_me'),
    },
})
const AppStack = createStackNavigator({
        MyTab : MyTab,
        Detail : Detail
})

但是这种方法也有一个问题 就是tab页面的头不好隐藏,1.0版本的方式不适用了,需要做如下处理

MyTab.navigationOptions = ({ navigation }) => {
    let { routeName } = navigation.state.routes[navigation.state.index];
    if(routeName=='ScreenHome'||routeName=='ScreenGroup'||routeName=='ScreenMe'){
        return {
            header:null,
        };
    }else if(routeName=='ScreenAdd'){
        return {
            headerTitle:'发布',
        };
    }else if(routeName=='ScreenMessage'){
        return {
            headerTitle:'消息',
        };
    }
};

需要隐藏单个文字的话修改源码如下:
自己额外加了一个判断,文件路径 node_modules/react-navigation-tabs/dist/views 30多行左右

if (typeof label === 'string') {
      if(label==''){
          return null;
      }else {
          return <Animated.Text numberOfLines={1} style={[styles.label, { color: tintColor }, showIcon && this._shouldUseHorizontalLabels() ? styles.labelBeside : styles.labelBeneath, styles.labelBeneath, labelStyle]} allowFontScaling={allowFontScaling}>
              {label}
          </Animated.Text>;
      }
    }

那么我们的登录流程和怎么和tab结合呢

这个时候我们就要用到createSwitchNavigator.说白了createSwitchNavigator里面的只能显示一个,这个就相当于之前的reset()方法.不处理回退操作,切换时将路由重置为默认状态. 他跳转(navigate())后其余的页面都销毁了

// 这里演示的是第二种方式
const AppStack = createStackNavigator({
       MyTab : MyTab,
       Detail : Detail
})
const LoginStack = createStackNavigator({
   Login : Login,
   Register : Register,
});

export defaul const AppNavigator = createSwitchNavigator({
   Splash : Splash,  // 这是引导页
   LoginStack : LoginStack,  // 这里包含登录前的所有页面,比如注册,登录 ,忘记密码 等
   App : AppStack, // 这里面包含所有登录后的页面
});

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,534评论 25 707
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,125评论 22 257
  • 床下女人 4 4. 这一觉睡得真好! 虽然听起来很搞笑,因为毕竟是背后挨了一记重击后昏迷过去引发的睡眠,但这确实是...
    阿呆的月亮阅读 610评论 0 1
  • 文/夏莲 折一个纸鸢 寄一世情缘 于水上寻找前世的记忆 放一只风筝 载一份心情 在天空中感染飞翔的鸟儿 然后我却忘...
    周小锦阅读 346评论 37 11
  • 接触缘由:因为易效能,学习定青蛙,吃青蛙,去过想要的生活。因为叶武滨老师,接触GTD理念,从《吃掉那只青蛙》这本书...
    陌上花开1210阅读 175评论 0 1