[RN] React Native 下实现底部标签(支持滑动切换)

时间:2024-10-09 13:07:21

上一篇文章

[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: , width: }]}
/>
),
},
},
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: , width: }]}
/>
),
},
},
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: , width: }]}/>
),
}
},
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: , width: }]}/>
),
}
},
}, {
swipeEnabled: true,
animationEnabled: true,
tabBarPosition: "bottom", //如果在顶部,就是 top
tabBarOptions: {
activeTintColor: '#45C018',
inactiveTintColor: '#111111',
showIcon: true, // 是否显示图标, 默认为false
showLabel: true, // 是否显示label
labelStyle: {
fontSize: ,
},
style: {
backgroundColor: '#fff',
borderTopWidth: 0.5,
borderTopColor: 'grey',
},
indicatorStyle: {
height: , // 不显示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

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