[RN] React Native 下實現底部標簽（支持滑動切換）

上一篇文章

[RN] React Native 下實現底部標簽（不支持滑動切換）

總結了不支持滑動切換的方法，此篇文章總結出 支持滑動 的方法

 

准備工作之類的，跟上文類似，大家可點擊上文查看相關內容。

不同點在於 /src/App.js 下

 

主要使用 react-navigation 下的 createMaterialTopTabNavigator

所以也需要先安裝 react-navigation

1）依賴版本如下：

"react-navigation": "^3.9.1",

 

 

2）代碼如下：

import React from 'react';
import {Image} from 'react-native';
import {createAppContainer, createMaterialTopTabNavigator} from 'react-navigation';

//展示的頁面
import Home from './Home';
import Contact from './Contact';
import Discover from './Discover';
import Mine from './Mine';

//Tab
const TabNavigator = createMaterialTopTabNavigator({
    Home: {
        screen: Home,//當前選項卡加載的頁面
        navigationOptions: {
            tabBarLabel: '新聞',
            tabBarIcon: ({tintColor, focused}) => (
                <Image
                    source={focused ? require('./main_tab_home_icon_pressed.png') : require('./main_tab_home_icon.png')}
                    style={[{height: 24, width: 24}]}
                />
            ),
        },
    },
    Contact: {
        screen: Contact,
        navigationOptions: {
            tabBarLabel: '視頻',
            tabBarIcon: ({tintColor, focused}) => (
                <Image
                    source={focused ? require('./main_tab_video_icon_pressed.png') : require('./main_tab_video_icon.png')}
                    style={[{height: 24, width: 24}]}
                />
            ),
        },
    },
    Discover: {
        screen: Discover,
        navigationOptions: {
            tabBarLabel: '圖片',
            tabBarIcon: ({tintColor, focused}) => (
                <Image
                    source={focused ? require('./main_tab_image_icon_pressed.png') : require('./main_tab_image_icon.png')}
                    style={[{height: 24, width: 24}]}/>
            ),
        }
    },
    Mine: {
        screen: Mine,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor, focused}) => (
                <Image
                    source={focused ? require('./main_tab_user_icon_pressed.png') : require('./main_tab_user_icon.png')}
                    style={[{height: 24, width: 24}]}/>
            ),
        }
    },
}, {
    swipeEnabled: true,
    animationEnabled: true,
    tabBarPosition: "bottom", //如果在頂部，就是 top
    tabBarOptions: {
        activeTintColor: '#45C018',
        inactiveTintColor: '#111111',
        showIcon: true, // 是否顯示圖標, 默認為false
        showLabel: true, // 是否顯示label
        labelStyle: {
            fontSize: 12,
        },
        style: {
            backgroundColor: '#fff',
            borderTopWidth: 0.5,
            borderTopColor: 'grey',
        },
        indicatorStyle: {
            height: 0, // 不顯示indicator
        },
    },

});

export default createAppContainer(TabNavigator);

 

二、如果要將將標簽放在頂部，只需要修改 abBarPosition 的值為 top，就可以實現Android下對應TabLayout 頂部效果

abBarPosition: "top", //如果在頂部，就是 top

三、更多可參考官網文檔

https://reactnavigation.org/docs/zh-Hans/getting-started.html

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10820183.html

轉載請注明出處！謝謝~~