如有轉(zhuǎn)載，請(qǐng)申明：轉(zhuǎn)載自 IT天宇： http://www.itdecent.cn/p/bdad2cd06413

前言

由于工作和學(xué)習(xí)原因，幾個(gè)月沒(méi)寫博客了。
博主在使用 React Native 的 TabNavigator 時(shí)，發(fā)現(xiàn)一些小問(wèn)題，查了很久資料也沒(méi)查到，最后自己摸索實(shí)驗(yàn)了好久，總算實(shí)現(xiàn)了。

我想要這樣的效果：

實(shí)際上，默認(rèn)是這樣的：

原因

What？ 怎么開(kāi)始寫 React Native 的教程了？

由于工作需要，最近轉(zhuǎn)向?qū)W習(xí) React Native，只能一句話形容 “根本停不下來(lái)”。好吧， app 轉(zhuǎn) java 狗之路走得真曲折。

目錄

1. 引入 TabNavigator

現(xiàn)在官方推薦使用的導(dǎo)航組件是 React Navigation

安裝

npm install --save react-navigation

導(dǎo)入

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

感嘆 ES6 寫法簡(jiǎn)潔而強(qiáng)大。

2. 加上 TabItem

編寫 Item

為了顯示 4 個(gè)平行的界面，我們需要寫 4 個(gè)組件。
這里直接寫 4 個(gè)只含有 Text 的組件。

Home.js

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

export default class Home extends Component {
    render() {
        return (
            <Text>首頁(yè)</Text>
        )
    }
}

Find.js / Message.js / Me.js

和 Home.js 幾乎一樣，只是把 <Text>首頁(yè)</Text> 中的文字改成相應(yīng)的。

使用 TabNavigator

先導(dǎo)入需要的組件，包括上面自己寫的 4 個(gè) 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'

然后寫一個(gè)組件來(lái)使用 TabNavigator

export default class Start extends Component {
    render() {
        const Tabs = TabNavigator(
            {
                Home: {
                    screen: Home,
                    navigationOptions: {
                        tabBarLabel: '首頁(yè)',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./images/tabbar_home.png')}/>,
                    }
                },

                Find: {
                    screen: Find,
                    navigationOptions: {
                        tabBarLabel: '發(fā)現(xiàn)',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./images/tabbar_find.png')}
                        />,
                    }
                },

                Message: {
                    screen: Message,
                    navigationOptions: {
                        tabBarLabel: '消息',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./images/tabbar_message_center.png')}
                        />,
                    }

                },

                Me: {
                    screen: Me,
                    navigationOptions: {
                        tabBarLabel: '我的',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./images/tabbar_me.png')}
                        />,
                    }
                }
            },
            {
                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 (
            <Tabs/>
        )
    }
}

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

沒(méi)錯(cuò)，和你網(wǎng)上看到的教程幾乎一樣，這個(gè)時(shí)候把這個(gè)組件渲染運(yùn)行的話，就是上面看到的默認(rèn)的情況。

3. 修改樣式達(dá)到 Material Design 要求

上面顯然不是想要的效果，MD規(guī)范為：整體高度 56dp，未選中的時(shí)候，圖標(biāo) 24dp，距離頂部 8dp；文字距離底部 8dp，距離圖標(biāo) 6dp。

為了達(dá)到 MD 的規(guī)范，我們需要修改一下。

在 tabBarOptions 屬性中加入圖標(biāo)的樣式

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