问题:本人做的页面是仿照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;
已经得到想要的效果了....(小白做的不足的地方,请多多指教!)