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，但也许不是下一篇文章，需要的朋友也可以给我留言。

作者：mymdeep
链接：https://juejin.im/post/596c6bd55188254b645a814f
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。