NavigationBar 下面的横线是怎么来的? 如何去除?
方法一(粗暴)
这篇通过寻找出width小于1xp的view的方式,找出此横线,并在ViewWillDidLoad 等方法里隐藏之
这里是具体方法以及Demo
方法二(2行代码)
这里,首先要知道,这调横线是怎么形成的,在导航栏和下面的VIew颜色相同时,突兀的有这样一天横线拦着 , 确实很影响美观!
那么,这天横线真的是一条横线吗?
其实,这是shadoImage 在作怪,这调横线,其实是NaVigationBar下产生的阴影效果,贴在一起就出现了横线的样式
因此,只要去掉阴影效果即可
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
IOS 去掉导航栏（UINavigationBar）下方的横线
UINavigationController--隐藏下方横线（小技巧）
iOS 去除NavigationController导航条最下面的一条横线
iOS隐藏导航栏底部的线条& UINavigationBar小技巧
如何隐藏导航栏下的线
iOS 去除导航栏下面的黑线
去除 导航栏的 自带 线条 （导航栏下面会有一条线 ）
去掉UINavigationBar底部的分割线
没有更多推荐了，全局管理导航栏的显示与隐藏，只需简单配置需要隐藏导航栏的ViewController
全局管理导航栏的显示与隐藏，只需简单配置需要隐藏导航栏的ViewController
喜欢打羽毛球，喜欢编程！BCDEIKMOPQRTUVW
常用论坛暂无常用论坛
活动地点：
活动时间：
03月12日-04月12日
友情链接热点链接热门城市4S店热门品牌4S店热门IT产品热门省份
论坛维护：尊重版权,未经授权不得转载
本文来自:江清清的技术专栏()
这段时间正在开发更新React Native嘎嘎商城实战项目,其实主界面是比较常见的Tab菜单切换的效果。React Native官方也给我们提供了这样的组件TabBariOS以及TabBariOS.Item。但是该只适合于iOS版本，但是Android版本需要自己写，最近正好在Github上面看到一个Android和iOS通用的Tab菜单导航切换库。所以本商城项目中采用这个库来实现了，下面我们一起来实现以下主界面的效果。
刚创建的React Native交流八群:,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
(二)Tab-Navigator库介绍
3.1.项目根目录运行如下命令进行下载安装react- native-tab-navigator库
npm install react-native-tab-navigator --save
3.2.在使用的页面如下导入TabNavigator
import TabNavigator from 'react-native-tab-navigator';
3.2.该库使用方法其实非常简单,简单的配置即可,看如下实例代码:
&TabNavigator&
&TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
renderIcon={() =& &Image source={...} /&}
renderSelectedIcon={() =& &Image source={...} /&}
badgeText="1"
onPress={() =& this.setState({ selectedTab: 'home' })}&
{homeView}
&/TabNavigator.Item&
&TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Profile"
renderIcon={() =& &Image source={...} /&}
renderSelectedIcon={() =& &Image source={...} /&}
renderBadge={() =& &CustomBadgeView /&}
onPress={() =& this.setState({ selectedTab: 'profile' })}&
{profileView}
&/TabNavigator.Item&
&/TabNavigator&
3.4.TabNavigator.Item支持的所有属性如下:
renderIcon: PropTypes.func,
加载Tab图标
renderSelectedIcon: PropTypes.func,
加载Tab被选中显示的图标
badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
Tab上面角标显示的数字
renderBadge: PropTypes.func,
title: PropTypes.string,
Tab显示的标题
titleStyle: Text.propTypes.style,
Tab显示的标题的样式
selectedTitleStyle: Text.propTypes.style,
Tab被选中显示的标题的样式
tabStyle: View.propTypes.style,
selected: PropTypes.bool,
Tab是否被选中
onPress: PropTypes.func,
allowFontScaling: PropTypes.bool,
是否允许字体自动缩放
(三)商城主页Tab菜单实现
上面我们介绍了该库的基本使用方式以及可以使用的属性，下面我们一起来实现的效果，核心代码如下:
* 商城主框架界面
'use strict';
import React, {Component} from 'react';
StyleSheet,
AppRegistry,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Home from './Home';
import Order from './Order';
import Cart from './Cart';
import Center from './Center';
class TabDemo extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab:'home'
render() {
&TabNavigator&
&TabNavigator.Item
title="主页"
selected={this.state.selectedTab === 'home'}
selectedTitleStyle={styles.selectedTextStyle}
titleStyle={styles.textStyle}
renderIcon={() =& &Image source={require("./imgs/ic_tab_home.png")} style={styles.iconStyle}/&}
renderSelectedIcon={() =& &Image source={require("./imgs/ic_tab_home_press.png")} style={styles.iconStyle}/&}
onPress={() =& this.setState({ selectedTab: 'home' })}&
&Home {...this.props}/&
&/TabNavigator.Item&
&TabNavigator.Item
title="订单"
selected={this.state.selectedTab === 'order'}
selectedTitleStyle={styles.selectedTextStyle}
titleStyle={styles.textStyle}
renderIcon={() =& &Image source={require("./imgs/ic_tab_order.png")} style={styles.iconStyle}/&}
renderSelectedIcon={() =& &Image source={require("./imgs/ic_tab_order_press.png")} style={styles.iconStyle}/&}
onPress={() =& this.setState({ selectedTab: 'order' })}&
&Order {...this.props}/&
&/TabNavigator.Item&
&TabNavigator.Item
title="购物车"
selected={this.state.selectedTab === 'cart'}
selectedTitleStyle={styles.selectedTextStyle}
titleStyle={styles.textStyle}
renderIcon={() =& &Image source={require("./imgs/ic_tab_cart.png")} style={styles.iconStyle}/&}
renderSelectedIcon={() =& &Image source={require("./imgs/ic_tab_cart_press.png")} style={styles.iconStyle}/&}
onPress={() =& this.setState({ selectedTab: 'cart' })}&
&Cart {...this.props}/&
&/TabNavigator.Item&
&TabNavigator.Item
title="我的"
selected={this.state.selectedTab === 'center'}
selectedTitleStyle={styles.selectedTextStyle}
titleStyle={styles.textStyle}
renderIcon={() =& &Image source={require("./imgs/ic_tab_center.png")} style={styles.iconStyle}/&}
renderSelectedIcon={() =& &Image source={require("./imgs/ic_tab_center_press.png")} style={styles.iconStyle}/&}
onPress={() =& this.setState({ selectedTab: 'center' })}&
&Center {...this.props}/&
&/TabNavigator.Item&
&/TabNavigator&
const styles=StyleSheet.create({
iconStyle:{
height:26,
textStyle:{
color:'#999',
selectedTextStyle:{
color:'black',
AppRegistry.registerComponent('TabDemo', () =& TabDemo);
运行效果如下:
(四)最后总结
今天带着大家实现了一下主页Tab菜单导航的效果，具体实例代码可以在项目中进行查看。项目地址:
刚创建的React Native交流八群:,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。
关注我的微博，可以获得更多精彩内容
在线用户: 3今日访问: 4,603昨日访问: 4,722累计访问: 7,979,546　　微信5.4安卓版发布更新了，由于本人的手机设置软件自动更新，中午的时候才发现微信换成了5.4版本，启动微信后是一个大大的&转账，就是发消息&，进入微信界面有点小惊喜，导航菜单都改为底部tab方式，顶部tab导航消失，通讯录下的订阅号和服务号入口合并了。（）
　　安卓版微信5.4底部tab菜单为：「微信」「通讯录」「发现」「我」，首次进入微信界面会提示新推的「面对面收钱」功能，主推移动支付，试图正面进攻支付宝钱包，在&我& - &钱包& - &转账&下。
　　通讯录下的订阅号和服务号入口合并了，在微信聊天下的服务号还是有更高的等级，没有像订阅号一样被折叠在&订阅号&文件夹下
　　这样的微信5.4安卓版喜欢吗？赶紧去体验一下吧
微信5.4主要更新
现在除了搜索联系人和聊天记录，还可以搜索公众号、公众号文章、收藏、微信功能了
查看图片时，可以识别图中的二维码
面对面收钱：通过二维码给身边的人转账
阅读(...) 评论()
部分内容来源于网络，如有版权问题请联系删除