[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

转载请注明出处！谢谢~~

转载于:https://www.cnblogs.com/wukong1688/p/10820183.html