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属性,这个属性会被忽略

使用步骤

  1. 创建TabBar标签: 使用下面行代码,底部就会有一个条 <TabBarIOS> </TabBarIOS>
  2. 添加选项卡 <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>
  3. 监听按钮点击,切换界面
    • 只要设置对应的tabBarItemselectedtrue,就会自动跳转到对应界面
    • 注意:tabBarItemselected属性不能写死,可以定义个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: 居中不拉伸。
  • 本地图片存放位置
      1. 直接放在RN项目中
      1. 可以放在ios项目中,放到images.xcassets文件中
      1. 可以放在android项目中(安卓中图片文字不能以数字开头,也不能有大写字母)
  • 如何加载本地图片
    • RN中加载资源:require(文件路径),用于加载RN中的资源,不管是图片,还是json都是一样的
    • uri:指定一个资源路径,就会自动加载
    • uri加载注意:通过uri加载资源,必须设置图片尺寸,否则不显示
    • 如果网络加载http图片,iOS默认不支持,需要开启App Transport

致谢

如果发现有错误的地方,欢迎各位指出,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 UWP 全屏 VB 全屏C++ 全屏

win10 可以全屏软件或窗口,窗口有一般、最小化、最大化。我们有新的API设置我们软件是全屏,是窗口。我们可以使用ApplicationView让我们软件全屏...

1171
来自专栏十月梦想

移动端开发样式初始化

在移动端开发,需要解决在移动端下的一些样式初始化,防止在设备出现不同的效果,下面我们看下,需要解决移动端的那些样式需要初始化!

1112
来自专栏知道一点点

bootstrap快速入门笔记(七)-表格,表单

2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

2523
来自专栏十月梦想

Vue动画封装的两种方式

    js方式我们需要引入之前的velocity.js,所需属性放入tempalate中,在模板的插槽中定义动画三个状态!

2732
来自专栏吴伟祥

Chrome 键盘快捷键 转

982
来自专栏极客编程

jQueryMobile快速入门

  jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动...

1342
来自专栏一“技”之长

Tkinter之Menu组件用法 原

    开发工具类桌面应用使用Python、Java这类语言是一种不错的选择,他们的GUI库都可以很好的支持跨平台特性。本系列博客主要总结Tkinter库中提供...

1082
来自专栏别先生

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuer...

61210
来自专栏别先生

Idea的快捷键,瞎摸索,开心就好,哈哈哈

前言:如果你有强迫症,换了一个编辑器,最痛苦莫过于快捷键,不顺手了。这里自己瞎摸索的快捷键,贴一下,这里主要以实际应用为主,因为大量介绍的网上已经很多很多,S...

2935
来自专栏大数据钻研

HTML基础复习(一)

HTML:超文本标记语言(HyperText Markup Language),不是一种编程语言,是标记语言 HTML元素: <p>段落</p> HTML标签:...

4096

扫码关注云+社区

领取腾讯云代金券