React Navigation V3中BottomTabNavigator实现滑动切换的方法

我完全懂你的困扰——React Navigation V3里createBottomTabNavigator确实没提供滑动切换的能力，旧的createBottomNavigator又被废弃了，而之前V2里轻松实现的滑动底部Tab，现在只能用支持滑动的createMaterialTopTabNavigator但它默认是顶部导航。不过别担心，我们可以通过自定义样式把createMaterialTopTabNavigator改成底部导航的样子，同时保留滑动切换的功能。

具体实现步骤 #

核心思路就是利用createMaterialTopTabNavigator的滑动特性，通过配置tabBarPosition和自定义样式，让它看起来和底部导航完全一致。

1. 导入所需组件
   首先确保你已经安装了react-navigation-tabs（V3里createMaterialTopTabNavigator在这个包中），然后导入：

   import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
   

2. 配置带滑动的底部Tab导航器
   下面是完整的示例代码，我会标注关键的样式配置：

   import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
   import HomeScreen from './screens/HomeScreen';
   import ProfileScreen from './screens/ProfileScreen';
   import SettingsScreen from './screens/SettingsScreen';
   
   const SwipeableBottomTabNavigator = createMaterialTopTabNavigator(
     {
       Home: HomeScreen,
       Profile: ProfileScreen,
       Settings: SettingsScreen,
     },
     {
       // 关键：把Tab栏放在底部
       tabBarPosition: 'bottom',
       // 开启滑动切换
       swipeEnabled: true,
       tabBarOptions: {
         // 自定义底部Tab栏的样式
         style: {
           backgroundColor: '#ffffff',
           borderTopWidth: 1,
           borderTopColor: '#e0e0e0',
           shadowColor: '#000',
           shadowOffset: { width: 0, height: -2 },
           shadowOpacity: 0.1,
           shadowRadius: 2,
         },
         // 调整选中指示器的位置（默认在顶部，改成底部）
         indicatorStyle: {
           bottom: 0,
           height: 2,
           backgroundColor: '#1677ff', // 替换成你的主题色
         },
         // 标签文字样式
         labelStyle: {
           fontSize: 12,
           fontWeight: '500',
         },
         // 选中/未选中的文字颜色
         activeTintColor: '#1677ff',
         inactiveTintColor: '#999999',
         // 如果需要显示图标，开启这个选项
         showIcon: true,
       },
     }
   );
   
   export default SwipeableBottomTabNavigator;
   

3. 添加自定义图标（可选）
   如果需要给每个Tab加上图标，可以在对应页面的navigationOptions里配置：

   // HomeScreen.js
   import Icon from 'react-native-vector-icons/Ionicons';
   
   HomeScreen.navigationOptions = {
     tabBarLabel: '首页',
     tabBarIcon: ({ focused }) => (
       <Icon 
         name={focused ? 'home' : 'home-outline'} 
         size={20} 
         color={focused ? '#1677ff' : '#999999'} 
       />
     ),
   };
   

为什么这个方法可行？ #

createMaterialTopTabNavigator本身就支持滑动切换，我们只是通过样式配置把它的Tab栏移到了底部，同时调整了指示器、背景等样式，让它的视觉效果和createBottomTabNavigator完全一致，同时保留了滑动切换的核心功能。

这样你就能在V3里实现和V2一样的滑动底部Tab效果了！

内容的提问来源于stack exchange，提问作者Michel Melhem