如何在React Native中使用React Navigation实现该底部标签栏？

你可以通过自定义React Navigation的底部标签栏组件来实现这种效果，以下是具体步骤：

1. 确认依赖安装 #

确保已安装基础依赖，未安装的话执行：

npm install @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context

2. 自定义标签栏组件 #

创建自定义TabBar组件，通过样式控制实现中间按钮凸起效果：

import React from 'react';
import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';

const CustomTabBar = ({ state, descriptors, navigation }) => {
  const screenWidth = Dimensions.get('window').width;

  return (
    <View style={styles.tabBarContainer}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel ?? options.title ?? route.name;
        const isFocused = state.index === index;

        // 处理中间凸起按钮（假设是第三个tab，索引从0开始）
        if (index === 2) {
          return (
            <TouchableOpacity
              key={route.key}
              onPress={() => navigation.navigate(route.name)}
              style={styles.centerButtonContainer}
            >
              <View style={[styles.centerButton, isFocused && styles.centerButtonActive]}>
                <View style={{color: isFocused ? '#2196F3' : '#888'}}>{label}</View>
              </View>
            </TouchableOpacity>
          );
        }

        return (
          <TouchableOpacity
            key={route.key}
            onPress={() => navigation.navigate(route.name)}
            style={styles.tabItem}
          >
            <View style={{color: isFocused ? '#2196F3' : '#888', marginTop: 4}}>{label}</View>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  tabBarContainer: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
    paddingVertical: 8,
    paddingBottom: 16,
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  centerButtonContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginTop: -20,
  },
  centerButton: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#fff',
    borderWidth: 2,
    borderColor: '#ddd',
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 5,
  },
  centerButtonActive: {
    borderColor: '#2196F3',
  },
});

export default CustomTabBar;

3. 在Tab导航器中使用自定义组件 #

创建底部标签导航器时，指定自定义TabBar：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import CustomTabBar from './CustomTabBar';
// 导入你的页面组件
import HomeScreen from './HomeScreen';
import SearchScreen from './SearchScreen';
import AddScreen from './AddScreen';
import ProfileScreen from './ProfileScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <Tab.Navigator
      tabBar={(props) => <CustomTabBar {...props} />}
      screenOptions={{ headerShown: false }}
    >
      <Tab.Screen name="首页" component={HomeScreen} />
      <Tab.Screen name="搜索" component={SearchScreen} />
      <Tab.Screen name="发布" component={AddScreen} />
      <Tab.Screen name="我的" component={ProfileScreen} />
      <Tab.Screen name="设置" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default App;

调整说明 #

• 若需使用图标，可安装react-native-vector-icons替换代码中的文字标签；
• 凸起高度、按钮大小等样式可通过修改styles中的marginTop、宽高参数调整；
• 适配安全区可结合react-native-safe-area-context的useSafeAreaInsets动态修改底部padding。

内容的提问来源于stack exchange，提问作者GB Studios