ReactNative学习笔记九之TabNavigator
之前写过一个关于StackNavigator的文章，如果感兴趣的同学可以翻一下我之前的文章（链接在文章末尾）。TabNavigator是我要介绍的关于react-navigation的第二个组件。
安装以及相关问题
首先要想使用react-navigation，需要先进行安装：
npm install --save react-navigation
简单示例
在这里我先写一个简单的示例，下面会不断的扩展介绍：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Home from './Home'
import { TabNavigator } from 'react-navigation';
import Second from './Second'
const TestTab = TabNavigator({
Home: { screen: Home },
Second: { screen: Second },
});
AppRegistry.registerComponent('TestTab', () => TestTab);
Home和Second是我随便写的两个简单界面，这里不再多说了。只需要一个
const TestTab = TabNavigator({ Home: { screen: Home }, Second: { screen: Second }, });
就可以实现一个TabNavigator：
option
看过我之前写的StackNavigator的文章都知道，可以通过设置option改变Navigator的样式。
现在试一下：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View
} from 'react-native';
import Home from './Home'
import { TabNavigator } from 'react-navigation';
import Second from './Second'
const TestTab = TabNavigator({
Home: { screen: Home,
navigationOptions: {
tabBarLabel: '第一个',
tabBarIcon: ({tintColor}) => (
<Image
source={require('./images/home.png')}
style={[{tintColor: tintColor},styles.icon]}
/>
),
}
},
Second: { screen: Second,
navigationOptions: {
tabBarLabel: '第二个',
tabBarIcon: ({tintColor}) => (
<Image
source={require('./images/second.png')}
style={[{tintColor: tintColor},styles.icon]}
/>
),
}
},
},
{
animationEnabled: true, // 切换页面时是否有动画效果
tabBarPosition: 'top', // 显示在底端，android 默认是显示在页面顶端的
swipeEnabled: true, // 是否可以左右滑动切换tab
backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions: {
activeTintColor: '#ff8500', // 文字和图片选中颜色
inactiveTintColor: '#999', // 文字和图片未选中颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
height: 0 // 如TabBar下面显示有一条线，可以设高度为0后隐藏
},
style: {
backgroundColor: '#fff', // TabBar 背景色
// height: 44
},
labelStyle: {
fontSize: 10, // 文字大小
},
},
});
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
AppRegistry.registerComponent('TestTab', () => TestTab);
具体配置属性的含义，可以参照后面的注释。
这里要注意：之前的版本设置tabbar的标题和图片用的是：
tabBar: { label: 'xxx', icon: ({tintColor}) => ( <Image source={require('../images/xxx.png')} style={[{tintColor: tintColor},styles.icon]} /> ), },但是现在去用的就是tabBarLabel，这跟react-navigation的版本有关
效果如下：
属性
除了上面提到的属性，接下来介绍一下其他可能会用到的属性。
标准的TabNavigator的构造函数有两个参数：
TabNavigator(RouteConfigs, TabNavigatorConfig)
TabNavigatorConfig
- tabBarComponent - tab bar的组件
- tabBarPosition -bar的位置，是在上面还是在下面，上述demo都是在上面
- swipeEnabled -是否支持左右滑动
- animationEnabled - 是否有动画
- lazy - 懒加载
- tabBarOptions这个看下面的详解
- initialRouteName - 第一次进入的界面
- order - 界面顺序
- paths - 可以设置跳转顺序
- backBehavior - 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions（TabBarBottom）
- activeTintColor - 激活版块的颜色
- activeBackgroundColor - 激活版块的背景颜色
- inactiveTintColor - 非激活版块的颜色
- inactiveBackgroundColor - 非激活版块的背景颜色
- showLabel -是否显示label
- style - tab bar的style
- labelStyle - label的style
- tabStyle - tab的style
tabBarOptions（TabBarTop）
- activeTintColor - 激活版块的颜色
- activeBackgroundColor - 激活版块的背景颜色
- inactiveTintColor - 非激活版块的颜色
- inactiveBackgroundColor - 非激活版块的背景颜色
- showIcon - 是否显示icon
- showLabel -是否显示label
upperCaseLabel - label是否全部大写，默认是true
pressColor - 点击颜色 (Android >= 5.0 only)
pressOpacity - 点击透明度(iOS and Android < 5.0 only)
scrollEnabled - 是否使用scrollable - tabStyle - tab的style
- indicatorStyle - 指示器style
- labelStyle - label的style
- iconStyle - icon的style
- style - tab bar的style
Screen Navigation Options
- title 标题
- tabBarVisible是否可见
- tabBarLabel每一个tab的名称
- tabBarIcon 每一个tab的icon
总结
这是关于TabNavigator的所有介绍，关于上面介绍的参数，我也是翻译的官网上的，之后还会介绍DrawerNavigator，但也许不是下一篇文章，需要的朋友也可以给我留言。
之前文章合集：
Android文章合集
iOS文章合集
ReactNative文章合集
如果你也做ReactNative开发，并对ReactNative感兴趣，欢迎关注我的公众号，加入我们的讨论群：
