用TabNavigator做一个符合Material Design的底部导航条

如有转载，请申明：转载自 IT天宇： http://www.jianshu.com/p/bdad2cd06413

前言

由于工作和学习原因，几个月没写博客了。
博主在使用 React Native 的 TabNavigator 时，发现一些小问题，查了很久资料也没查到，最后自己摸索实验了好久，总算实现了。

我想要这样的效果：

实际上，默认是这样的：

原因

What？ 怎么开始写 React Native 的教程了？

由于工作需要，最近转向学习 React Native，只能一句话形容 “根本停不下来”。好吧， app 转 java 狗之路走得真曲折。

目录

1. 引入 TabNavigator

现在官方推荐使用的导航组件是 React Navigation

安装

npm install --save react-navigation

导入

import {
    TabNavigator,
} from 'react-navigation';

感叹 ES6 写法简洁而强大。

2. 加上 TabItem

编写 Item

为了显示 4 个平行的界面，我们需要写 4 个组件。
这里直接写 4 个只含有 Text 的组件。

Home.js

import React, {Component} from 'react';
import {
    Text,
} from 'react-native';

export default class Home extends Component {
    render() {
        return (
            首页
        )
    }
}

Find.js / Message.js / Me.js

和 Home.js 几乎一样，只是把 首页 中的文字改成相应的。

使用 TabNavigator

先导入需要的组件，包括上面自己写的 4 个 Item

import React, {Component} from 'react';
import {
    StyleSheet,
    Image,
} from 'react-native';

import {
    TabNavigator,
} from 'react-navigation';

import Home from './Home'
import Find from './Find'
import Message from './Message'
import Me from './Me'

然后写一个组件来使用 TabNavigator

export default class Start extends Component {
    render() {
        const Tabs = TabNavigator(
            {
                Home: {
                    screen: Home,
                    navigationOptions: {
                        tabBarLabel: '首页',
                        tabBarIcon: ({tintColor}) => ,
                    }
                },

                Find: {
                    screen: Find,
                    navigationOptions: {
                        tabBarLabel: '发现',
                        tabBarIcon: ({tintColor}) => ,
                    }
                },

                Message: {
                    screen: Message,
                    navigationOptions: {
                        tabBarLabel: '消息',
                        tabBarIcon: ({tintColor}) => ,
                    }

                },

                Me: {
                    screen: Me,
                    navigationOptions: {
                        tabBarLabel: '我的',
                        tabBarIcon: ({tintColor}) => ,
                    }
                }
            },
            {
                animationEnabled: true,
                tabBarPosition: 'bottom',
                swipeEnabled: true,
                backBehavior: 'none',
                tabBarOptions: {
                    activeTintColor: 'orange',
                    inactiveTintColor: 'gray',
                    showIcon: true,
                    indicatorStyle: {
                        height: 0,
                    },
                    style: styles.tabBar,
                    tabStyle: styles.tabBarItem,
                    labelStyle: styles.tabBarLabel,
                    pressColor: 'gray',
                    pressOpacity: 0.8,
                    upperCaseLabel: false,
                },

            }
        )

        return (
            
        )
    }
}

const styles = StyleSheet.create({
    tabBarImage: {
        width: 24,
        height: 24,
    },
    tabBar: {
        backgroundColor: 'white',
    },
    tabBarLabel: {
        fontSize: 12,
    },
    tabBarItem: {
        height: 56,
    },
})

没错，和你网上看到的教程几乎一样，这个时候把这个组件渲染运行的话，就是上面看到的默认的情况。

3. 修改样式达到 Material Design 要求

上面显然不是想要的效果，MD规范为：整体高度 56dp，未选中的时候，图标 24dp，距离顶部 8dp；文字距离底部 8dp，距离图标 6dp。

为了达到 MD 的规范，我们需要修改一下。

在 tabBarOptions 属性中加入图标的样式

iconStyle: styles.tabBarIcon,

然后在样式中做如下修改

tabBarImage: {
    width: 24,
    height: 24,
    marginTop: 8,
},
tabBarIcon: {
    height: 32,
},

tabBarLabel: {
    fontSize: 12,
    marginBottom: 8,
    marginTop: 6,
},

tabBarImage 中增加了 marginTop
增加样式 tabBarIcon
tabBarLabel 中增加了 marginTop, marginBottom