React Native 系列(九) -- Tab标签组件
前言
本系列是基于React Native
版本号0.44.3
写的。很多的App
都使用了Tab
标签组件,例如QQ
,微信
等等,就是切换不同的选项,显示不同的内容。那么这篇文章将介绍RN
中的Tab
标签组件。
Tab
标签
什么是Tab
标签?(ps:我是这样叫的),就拿微信来说吧,底部有4个选项卡,点击不同的按钮切换不同的内容。
在RN
中有两个组件负责实现这样的效果,它们是:
TabBarIOS
和NavigatorIOS
相似,看名字就知道该组件只适用于iOS
,不能用于android
。
TabBarIOS 常用属性
barTintColor string:标签栏的背景颜色。
style:样式
tintColor string: 当前被选中的标签图标的颜色。 unselectedItemTintColor string: 当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效
translucent bool: 一个布尔值,决定标签栏是否需要半透明化。
TabBarIOS.Item
- 注意:
TabBarIOS.Item
必须包装一个View
,作为点击选项卡,切换的view
TabBarIOS.Item 常用属性
badge string, number :在图标右上角显示一个红色的气泡。
icon Image.propTypes.source :给当前标签指定一个自定义的图标。如果定义了systemIcon属性, 这个属性会被忽略。
onPress function :当此标签被选中时调用。你应该修改组件的状态来使得selected={true}。
selected bool :这个属性决定了子视图是否可见。如果你看到一个空白的页面,很可能是没有选中任何一个标签。
selectedIcon Image.propTypes.source :当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性,这个属性会被忽略。如果定义了icon而没定义这个属性,在选中的时候图标会染上蓝色。
systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') :一些预定义的系统图标。注意如果你使用了此属性,标题和自定义图标都会被覆盖为系统定义的值。
title string :在图标下面显示的标题文字。如果定义了systemIcon属性,这个属性会被忽略
使用步骤
创建
TabBar
标签: 使用下面行代码,底部就会有一个条<TabBarIOS>
</TabBarIOS>
添加选项卡
<TabBarIOS.Item
title='首页'
icon={{uri: 'tabbar_home_select' , scale: 3}}
>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red'}}>
<Text>首页</Text>
</View>
</TabBarIOS.Item>
监听按钮点击,切换界面
- 只要设置对应的
tabBarItem
的selected
为true
,就会自动跳转到对应界面 - 注意:
tabBarItem
的selected
属性不能写死,可以定义个flag
来标记当前选中的item
- 监听
tabBarItem
的点击,修改selected
属性
- 只要设置对应的
实战演练
先看效果图:
我们在index.ios.js
文件做修改,直接创建一个TabBarIOS
组件:
render() {
return (
<TabBarIOS
tintColor='orange'
barTintColor='black'
>
</TabBarIOS>
);
}
再创建三个选项卡(ps:3个选项卡创建方式类似,所以这里只贴出创建一个的代码,),icon
是图片,关于图片方面的知识,本文最后做一个总结吧:
<TabBarIOS.Item
title='首页'
icon={{uri: 'tabbar_home_select' , scale: 3}}
selected={true}
>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red'}}>
<Text>首页</Text>
</View>
</TabBarIOS.Item>
监听按钮点击,然后实现界面切换,我们需要定义一个flag
记录当前选中的,
constructor(props) {
super(props);
// 初始状态
this.state = {
selectIndex:0,
};
}
给TabBarIOS.Item
添加点击事件:
<TabBarIOS.Item
title='首页'
icon={{uri: 'tabbar_home_select' , scale: 3}}
onPress={()=>{
this.setState({
selectIndex:0
})
}}
selected={0==this.state.selectIndex}
>
我们会发现,创建3个TabBarIOS.Item
的代码是一样的,避免写重复代码,我们可以抽取出来:
_renderTabBarItem(title, iconName, selected, bgColor, badgeNumber){
return (
<TabBarIOS.Item
title={title}
icon={{uri: iconName, scale: 3}}
onPress={()=>{
this.setState({
selectIndex: selected
})
}}
badge={badgeNumber}
selected={this.state.selectIndex === selected}
>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: bgColor}}>
<Text>{title}</Text>
</View>
</TabBarIOS.Item>
);
}
然后我们整个创建标签Tab
的代码就应该是这样:
render() {
return (
<TabBarIOS
tintColor='orange'
barTintColor='black'
>
{this._renderTabBarItem("首页", 'tabbar_my_select', 0, 'red', null)}
{this._renderTabBarItem("消息", 'tabbar_my_select', 1, 'yellow', 2)}
{this._renderTabBarItem("我的", 'tabbar_my_select', 2, 'cyan', null)}
</TabBarIOS>
);
}
TabNavigator
本系列上篇文章中,介绍到React Navigation
组件中包含了TabNavigator
。所以接下来的讲解是在引入了React Navigation
的基础之上的。
常用属性
screen:和导航的功能是一样的,对应界面名称,可以在其他页面通过这个screen传值和跳转。
navigationOptions:配置TabNavigator的一些属性
{
title:标题,会同时设置导航条和标签栏的title
tabBarVisible:是否隐藏标签栏。默认不隐藏(true)
tabBarIcon:设置标签栏的图标。需要给每个都设置
tabBarLabel:设置标签栏的title。推荐
}
tabBarPosition:设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top','bottom')
swipeEnabled:是否允许在标签之间进行滑动
animationEnabled:是否在更改标签时显示动画
lazy:是否根据需要懒惰呈现标签,而不是提前,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐为true
trueinitialRouteName: 设置默认的页面组件
backBehavior:按 back 键是否跳转到第一个Tab(首页), none 为不跳转
tabBarOptions:配置标签栏的一些属性iOS属性
activeTintColor:label和icon的前景色 活跃状态下
activeBackgroundColor:label和icon的背景色 活跃状态下
inactiveTintColor:label和icon的前景色 不活跃状态下
inactiveBackgroundColor:label和icon的背景色 不活跃状态下
showLabel:是否显示label,默认开启 style:tabbar的样式
labelStyle:label的样式安卓属性
activeTintColor:label和icon的前景色 活跃状态下
inactiveTintColor:label和icon的前景色 不活跃状态下
showIcon:是否显示图标,默认关闭
showLabel:是否显示label,默认开启 style:tabbar的样式
labelStyle:label的样式 upperCaseLabel:是否使标签大写,默认为true
pressColor:material涟漪效果的颜色(安卓版本需要大于5.0)
pressOpacity:按压标签的透明度变化(安卓版本需要小于5.0)
scrollEnabled:是否启用可滚动选项卡 tabStyle:tab的样式
indicatorStyle:标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题
labelStyle:label的样式
iconStyle:图标样式
实战演练
我们创建App.js
,然后在index.ios.js
文件引用该组件:
import App from './App'
export default class RNDemoTwo extends Component {
render() {
return (
<App/>
);
}
}
现在来配置下App.js
文件:
import {TabNavigator} from 'react-navigation'
import HelloViewCompnent from './HelloViewComponent'
import DetailComponent from './DetailComponent'
import ThreeComponent from './Three'
import CustTabBarItem from "./TabBarItem"
const SimpleApp = TabNavigator({
Home: {
screen: HelloViewCompnent,
navigationOptions: ({navigation}) => ({
tabBarVisible: true,
tabBarLabel: '首页',
tabBarIcon: ({focused, tintColor})=>(
<CustTabBarItem
tintColor={tintColor}
focused={focused}
selectImage={{uri: 'tabbar_home_select'}}
normalImage={{uri: 'tabbar_home'}}
/>
),
})
},
Detail: {
screen: DetailComponent,
navigationOptions: ({navigation}) => ({
tabBarLabel: '消息',
tabBarIcon: ({focused, tintColor})=>(
<CustTabBarItem
tintColor={tintColor}
focused={focused}
selectImage={{uri: 'tabbar_licai_select'}}
normalImage={{uri: 'tabbar_licai'}}
/>
),
})
},
Three: {
screen: ThreeComponent,
navigationOptions: ({navigation}) => ({
tabBarLabel: '我的',
tabBarIcon: ({focused, tintColor})=>(
<CustTabBarItem
tintColor={tintColor}
focused={focused}
selectImage={{uri: 'tabbar_my_select'}}
normalImage={{uri: 'tabbar_my'}}
/>
),
})
}
},{
tabBarPosition:'bottom',
swipeEnabled:false,
animationEnabled:false,
lazy:true,
tabBarOptions:{
activeTintColor:'red',
inactiveTintColor:'black',
style:{backgroundColor:'#fff',},
labelStyle: {
fontSize: 16, // 文字大小
},
}
})
export default SimpleApp
可以看到我们导入了三个页面组件,一个CustTabBarItem
,
三个页面组件很简单,都类似,由于篇幅原因,只贴出一个就行了:
export default class HelloViewCompnent extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
首页
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
最后,就是我们的TabBarItem.js
文件了:
export default class TabBarItem extends Component {
render(){
return (
<Image source={this.props.focused ? this.props.selectImage : this.props.normalImage}
style={{tintColor: this.props.tintColor, width: 25, height: 25}}/>
);
}
}
保存代码,运行项目,不出意外,应该和使用TabBarIOS
是一样的效果。
关于Image组件
由于这里我们都使用到<Image/>
组件,这里就稍微讲一下。
Image:用于加载图片,可加载网络图片,也可以加载本地图片
Image常用属性
source {uri: string}, number : 设置Image图片资源
blurRadius number:让图片模糊
defaultSource {uri: string, width: number, height:number, scale: number}, number 占位图片,在读取图片时默认显示的加载提示图片 resizeMode enum('cover', 'contain', 'stretch', 'repeat',
'center') 决定图片尺寸大小。
cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。
contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白
stretch: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。
repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
center: 居中不拉伸。
```
本地图片存放位置
- 直接放在RN项目中
- 可以放在
ios
项目中,放到images.xcassets
文件中
- 可以放在
- 可以放在
android
项目中(安卓中图片文字不能以数字开头,也不能有大写字母)
- 可以放在
如何加载本地图片
- RN中加载资源:require(文件路径),用于加载RN中的资源,不管是图片,还是json都是一样的
- uri:指定一个资源路径,就会自动加载
- uri加载注意:通过uri加载资源,必须设置图片尺寸,否则不显示
- 如果网络加载http图片,iOS默认不支持,需要开启
App Transport
。
致谢
如果发现有错误的地方,欢迎各位指出,谢谢!
React Native 系列(九) -- Tab标签组件的更多相关文章
- React Native 系列(九)
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- React Native之本地文件系统访问组件react-native-fs的介绍与使用
React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...
- [RN] React Native 实现 多选标签
React Native 实现 多选标签 效果如下: 实现代码: import React, {Component} from 'react'; import {Button, StyleSheet, ...
- React Native 系列(五) -- 组件间传值
前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...
- React Native 系列(二) -- React入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React Native 系列(二)
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React Native 开发之 (07) 常用组件-View
掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的 ...
随机推荐
- 如何利用keytool查看一个apk的签名
- OSX MacVim + vim-lldb配置和使用心得
Mac里面默认的编译器是clang/clang++ 所以debugger就选择了lldb 想搭配MacVim一起使用,于是就找到了vim-lldb这个插件,相当强大 这个插件支持Vundle,所以 ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- python实现希尔排序(已编程实现)
希尔排序: 观察一下”插入排序“:其实不难发现她有个缺点: 如果当数据是”5, 4, 3, 2, 1“的时候,此时我们将“无序块”中的记录插入到“有序块”时,估计俺们要崩盘, 每次插入都要移动位置,此 ...
- java基础之集合框架(1)
一.介绍Collection 1.概念:Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collection ...
- 391.FANUC宏程序编程
运算符 运算符由2个字母组成,用于两个值的比较,以决定它们是相等还是一个值小于或大于另一个值.注意,不能使用不等号 运算符 含义 EQ 等于(=) NE 不等于 GT 大于 GE 大于或等于 LT 小 ...
- Redis基本数据结构总结之SET、ZSET和HASH
Redis基本数据结构总结 前言 Redis的特点在于其读写速度特别快,因为是存储在内存中的,其非常适合于处理大数据量的情况:还有一个是其不同于其他的关系型数据库,Redis是非关系型数据库,也就是我 ...
- PHP面向对象 ——多态
接口 接口(interface)是抽象方法和静态常量定义的集合. 接口是一种特殊的抽象类,这种抽象类中只包含抽象方法和静态常量. 接口中没有其它类型的内容 接口的定义 /** * 接口可以认为是特殊的 ...
- docker学习笔记--重基础使用
最近一直在研究Elasticsearch,后来部门的同事遇到了一个docker集群的未授权访问漏洞,于是稍微看了一下docker进行了一下基本的入门,本文把自己学习docker的过程进行了一个详细的记 ...
- MongoDB安全及身份认证
前面的话 本文将详细介绍MongoDB安全相关的内容 概述 MongoDB安全主要包括以下4个方面 1.物理隔离 系统不论设计的多么完善,在实施过程中,总会存在一些漏洞.如果能够把不安全的使用方与Mo ...