Tab导航器自定义圆形按钮不显示问题求助

问题描述 #

我想要创建中间凸起的圆形Tab按钮（参考目标效果），目前导航栏已实现，但中间的圆形按钮完全不显示（已设置红色背景便于观察），不过点击中间位置能正常跳转到对应页面。

目标效果：

当前效果：

我的代码 #

TabBarCircle组件代码 #

import React from 'react';
import { Container, Circle } from './styles';

export function TabBarCircle({ children, onPress }: any) {
  return (
    <Container onPress={onPress}>
      <Circle>{children}</Circle>
    </Container>
  );
}

Styled Components样式代码 #

import styled from 'styled-components/native';
import { RFValue } from 'react-native-responsive-fontsize';

export const Container = styled.TouchableOpacity``;

export const Circle = styled.View`
  justify-content: center;
  align-items: center;
  width: ${RFValue(40)}px;
  height: ${RFValue(40)}px;
  background-color: 'red';
  border-radius: ${RFValue(20)}px;
`;

Tab导航栏代码 #

<Navigator
    initialRouteName="Home"
    screenOptions={{
      headerShown: false,
      tabBarActiveTintColor: theme.colors.primary,
      tabBarStyle: {
        position: 'absolute',
        borderTopRightRadius: 16,
        borderTopLeftRadius: 16,
        borderColor: '#9E9E9E',
        borderWidth: 1.5,
        borderStyle: 'solid',
        bottom: 0,
        height: 90,
        paddingHorizontal: 16,
      },
    }}
  >
    <Screen
      key="Home"
      name="Home"
      component={Home}
      options={{
        tabBarIcon: ({ focused }) => (
          <TabBarIconAndText text="Home" focused={focused} icon="Home" />
        ),
        tabBarLabel: '',
      }}
    />
    <Screen
      key="Search"
      name="Search"
      component={Search}
      options={{
        tabBarIcon: ({ focused }) => (
          <TabBarIconAndText text="Search" focused={focused} icon="Search" />
        ),
        tabBarLabel: '',
      }}
    />
    <Screen
      key="CreatePost"
      name="CreatePost"
      component={CreatePost}
      options={{
        tabBarIcon: ({ focused }) => <PlusSVG width={10} height={10} />,
        tabBarButton: (props) => <TabBarCircle {...props} fill="red" />,
        tabBarLabel: '',
      }}
    />
    <Screen
      key="Shorts"
      name="Shorts"
      component={Shorts}

修复方案 #

1. 修正背景色语法错误 #

styled-components中颜色值不需要加引号，原代码里的'red'会被识别为无效值，导致背景不显示。修改Circle组件样式：

export const Circle = styled.View`
  justify-content: center;
  align-items: center;
  width: ${RFValue(40)}px;
  height: ${RFValue(40)}px;
  background-color: red; // 去掉引号
  border-radius: ${RFValue(20)}px;
`;

2. 实现按钮凸起效果 #

给Container添加向上偏移的样式，让按钮突出于TabBar：

export const Container = styled.TouchableOpacity`
  margin-top: -${RFValue(20)}px; // 向上偏移20px，可按需调整
  justify-content: center;
  align-items: center;
  z-index: 10; // 确保按钮在TabBar上方不被遮挡
`;

3. 调整图标可见性 #

原PlusSVG尺寸过小（10x10），建议放大并设置对比色：

tabBarIcon: ({ focused }) => <PlusSVG width={20} height={20} fill="#FFFFFF" />

4. 验证布局约束 #

确认TabBar的position: absolute不会限制按钮显示，若仍有遮挡，可调整TabBar的paddingTop或进一步提升按钮的z-index值。

内容的提问来源于stack exchange，提问作者Nilton Schumacher F