ReacrNative----使用TabNavigator隐藏底部导航栏

        问题:本人做的页面是仿照QQ的界面来做的,底部有三个导航栏,但是在消息页面点击聊天信息进入详情的时候底部的导航栏还是存在的,详细情况见图: 

 

         问题代码:将要跳转的详情页面注册到了消息页面的同一级,并在TabNavigator中进行了配置,这才导致详情页面也默认为了TabNavigator的一个页面,所以标题栏还存在,看代码:

const chatStackNavigator = createStackNavigator({
    Chat:{
        screen:Chat,
    },
    ChatDetail:{
        screen:ChatDetail,
    },
});
const tabNavigator = createBottomTabNavigator(
{
    Chat:{
        screen:chatStackNavigator, // 在screen中配置这三个Stack即可
        navigationOptions:{
            tabBarLabel:'消息',
            tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/chat.png')}/>
    }
},
    People:{
        screen:peopleStackNavigator,
        navigationOptions:{
            tabBarLabel:'联系人',
            tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/people.jpg')}/>
    }
},
    Me:{
        screen:meStackNavigator,
        navigationOptions:{
            tabBarLabel:'我',
            tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/me.jpg')}/>
        }
    }
},
);

         解决方法:将三个底部标签栏对应的页面单独配置在TabNvaigator中,再创建一个StackNavigator,主页面为刚才配置得TabNavigator,在同一级配置要跳转的页面,这样就保证了跳转到聊天页面后没有底部导航栏。下面上代码:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image} from 'react-native';
import {createAppContainer,createBottomTabNavigator,createStackNavigator} from 'react-navigation'
import Chat from './Tab/Chat';
import Me from './Tab/Me';
import People from './Tab/People';
import ChatDetail from './detail/ChatDetail';
import MeDetail from './detail/MeDetail';
import PeopleDetail from './detail/PeopleDetail';
import Drawer from './Drawer/Drawer';
const meStackNavigator = createStackNavigator({
    Me:{
        screen:Me,
        navigationOptions:{
            header:null
        }
    }
});
const peopleStackNavigator = createStackNavigator({
   People:{
        screen:People,
        navigationOptions:{
            headerTitle:'联系人'
        }
    }
});
const chatStackNavigator = createStackNavigator({
    Chat:{
        screen:Chat,
    }
});
const tabNavigator = createBottomTabNavigator(
{
    Chat:{
        screen:chatStackNavigator, // 在screen中配置这三个Stack即可
        navigationOptions:{
            tabBarLabel:'消息',
            tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/chat.png')}/>
        }
    },
    People:{
        screen:peopleStackNavigator,
        navigationOptions:{
            tabBarLabel:'联系人',
            tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/people.jpg')}/>
        }
    },
    Me:{
        screen:meStackNavigator,
        navigationOptions:{
            tabBarLabel:'我',
            tabBarIcon:<Image style={{width:21,height:21}} source={require('../src/image/me.jpg')}/>
        }
    }
},
);


const stackMain = createStackNavigator({
    Tab:{
        screen:tabNavigator,
        navigationOptions:{
            header:null
        }
    },
    // 消息页面需要跳转的页面
    ChatDetail:{
        screen:ChatDetail,
    },
    Drawer:{
        screen:Drawer,
    },
    // 联系人页面需要跳转的页面
    PeopleDetail:{
        screen:PeopleDetail
    },
    // 个人信息页面需要跳转的页面
    MeDetail:{
        screen:MeDetail
    }
});
const Main = createAppContainer(stackMain);
export default Main;

 已经得到想要的效果了....(小白做的不足的地方,请多多指教!)

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值