- TabNavigator中的页面是StackNavigator的是,点击Tab不能切换
解决方案:使用 StackNavigator 中嵌套TabNavigator
//设置底部栏 -- Tabbar
const MainBottomTabNav = createBottomTabNavigator({
首页: {
screen: CustomTab1,
},
我的: {
screen: CustomTab2,
},
}, {
animationEnabled: false, // 切换页面时不显示动画
tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的
swipeEnabled: false, // 禁止左右滑动
backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转
tabBarOptions: {
activeTintColor: '#008AC9', // 文字和图片选中颜色
inactiveTintColor: '#999', // 文字和图片默认颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
height: 0
}, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
style: {
backgroundColor: '#fff', // TabBar 背景色
},
labelStyle: {
fontSize: 12, // 文字大小
},
},
});
//设置TabBar的title,如果和NavBar混合使用,这个是必须的
MainBottomTabNav.navigationOptions = ({
navigation
}) => {
let {
routeName
} = navigation.state.routes[navigation.state.index];
let headerTitle = routeName;
return {
headerTitle
};
};
//设置顶部栏 -- NavBar
const HomeNav = createStackNavigator({
Home: {
screen: MainBottomTabNav
}
});
export default HomeNav;
2.嵌套使用的时候,无法设置NavBar的Title
解决方案:官网地址
//设置TabBar的title,如果和NavBar混合使用,这个是必须的
MainBottomTabNav.navigationOptions = ({
navigation
}) => {
let {
routeName
} = navigation.state.routes[navigation.state.index];
let headerTitle = routeName;
return {
headerTitle
};
};
3.嵌套使用时候,安卓导航不居中问题
解决方案:
(1)不嵌套的页面,使用修改headTitleStyle
static navigationOptions = {
headerTitleStyle:{
flex: 1,
textAlign: 'center',
},
}
(2)嵌套页面中使用上面方法没有效果,需要修改
node_modules/react-navigation/src/views/Header/Header.js
中 _renderTitle 方法
// { justifyContent: layoutPreset === 'center' ? 'center' : 'flex-start' },
//修改为下面
{ justifyContent: layoutPreset === 'center' ? 'center' : 'center' },
网友评论