上一篇文章
[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
转载请注明出处！谢谢~~