React Native实现底部导航栏中间悬浮圆形按钮

要实现两个底部标签中间的悬浮圆形按钮，按以下步骤修改代码：

1. 恢复被注释的AddReferral页面路由 #

先解除AddReferral Screen的注释，悬浮按钮需要跳转到该页面：

<Screen name="AddReferral" component={AddNewReferralScreen} options={{
  headerShown: false,
}} />

2. 重构自定义BottomTabBar组件 #

将原BottomTabBar改为容器布局，在底部导航栏上方叠加绝对定位的悬浮按钮：

• 用View作为外层容器并设置相对定位
• 添加中间占位标签，让左右两个真实标签自动平分宽度
• 给悬浮按钮设置圆形样式、阴影和悬浮偏移，绑定跳转事件

修改后的BottomTabBar代码：

import { View, TouchableOpacity, StyleSheet } from 'react-native';

const BottomTabBar = ({ navigation, state, referralRequest }: any) => (
  <View style={styles.tabBarContainer}>
    <BottomNavigation
      selectedIndex={state.index}
      onSelect={(index) => navigation.navigate(state.routeNames[index])}
      style={{ 
        display: state.routeNames[state.index] === "AddReferral" ? 'none' : 'flex' 
      }}
    >
      <BottomNavigationTab
        title={i18n.t("bottomNavigation:requests")}
        icon={IconComponent(evaIcons.team, Colors.black900)}
      />
      {/* 中间占位标签，隐藏内容以保证左右标签居中分布 */}
      <BottomNavigationTab style={{ opacity: 0 }} />
      <BottomNavigationTab
        title={i18n.t("bottomNavigation:sentRequest")}
        icon={IconComponent(evaIcons.plus, Colors.black900)}
      />
    </BottomNavigation>

    {/* 悬浮圆形按钮 */}
    <TouchableOpacity
      style={styles.fabButton}
      onPress={() => navigation.navigate("AddReferral")}
      activeOpacity={0.8}
    >
      {IconComponent(evaIcons.plus, Colors.white)}
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  tabBarContainer: {
    position: 'relative',
  },
  fabButton: {
    position: 'absolute',
    bottom: 20, // 调整此值控制按钮悬浮高度
    left: '50%',
    transform: [{ translateX: -25 }], // 水平居中（按钮宽50，偏移-25）
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: Colors.primary, // 替换为你的项目主色调
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5, // Android阴影效果
  },
});

3. 调整Navigator路由顺序 #

确保路由顺序对应底部标签的分布：Transactions → AddReferral → Transfer，同时修正原代码中不存在的initialRouteName：

export const WalletBottomTabNavigator = () => {
  const navigation = useNavigation();

  return (
    <Navigator
      backBehavior="history"
      initialRouteName={'Transactions'}
      tabBar={(props) => <BottomTabBar {...props}/>}
    >
      <Screen name='Transactions' component={WalletScreen} options={{
        headerTitle: "",
        headerLeft: () => <HeaderRight />,
        headerRight: () => <ProductsButton />,
        title: i18n.t("bottomNavigation:team"),
      }} />
      <Screen name="AddReferral" component={AddNewReferralScreen} options={{
        headerShown: false,
      }} />
      <Screen name="Transfer" component={InvitationsScreen} options={{
        headerTitle: "",
        headerLeft: () => <HeaderRight />,
        headerRight: () => <ProductsButton />,
        title: i18n.t("bottomNavigation:requests"),
      }} />
    </Navigator>
  );
};

关键细节 #

• 中间占位标签用于维持左右标签的对称分布，保证悬浮按钮在视觉中间
• 通过transform: translateX实现按钮精确居中，数值为按钮宽度的一半
• 跳转至AddReferral页面时隐藏导航栏，避免布局冲突

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