React Native：如何移除Material Bottom Tabs导航器的溢出隐藏

你的推测没错，MaterialBottomTabs的容器默认确实设置了overflow: hidden，要完整显示超出边缘的中间按钮，可以通过自定义TabBar样式和调整按钮定位来解决，以下是具体实现步骤：

• 自定义外层容器解除溢出限制
  先导入默认的MaterialBottomTabBar，然后在外层套一个View，设置overflow: visible来覆盖原容器的隐藏规则：

  import { MaterialBottomTabBar } from '@react-navigation/material-bottom-tabs';
  
  const CustomTabBar = (props) => {
    return (
      <View style={{ overflow: 'visible', marginBottom: 12 }}>
        <MaterialBottomTabBar {...props} />
      </View>
    );
  };
  

  加marginBottom是为了避免按钮底部被屏幕边缘遮挡，数值可以根据按钮大小调整。

• 修改TabBar自身样式
  在导航器的screenOptions里直接调整TabBar的样式，确保其自身也取消溢出限制，同时可以调整高度给中间按钮留出空间：

  <MaterialBottomTabs.Navigator
    tabBar={(props) => <CustomTabBar {...props} />}
    screenOptions={{
      tabBarStyle: {
        overflow: 'visible',
        height: 70, // 比默认高度高，给中间按钮突出的空间
      },
    }}
  >
    {/* 你的各个屏幕组件 */}
  </MaterialBottomTabs.Navigator>
  

• 设置中间按钮的绝对定位
  给中间的Tab按钮设置绝对定位，让它脱离TabBar的文档流，实现超出边缘的效果：

  <MaterialBottomTabs.Screen
    name="MiddleAction"
    component={MiddleScreen}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{
          position: 'absolute',
          bottom: 20, // 控制按钮向上突出的距离
          width: 64,
          height: 64,
          borderRadius: 32,
          backgroundColor: focused ? '#2563eb' : '#1d4ed8',
          justifyContent: 'center',
          alignItems: 'center',
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 3 },
          shadowOpacity: 0.27,
          shadowRadius: 4.65,
          elevation: 6,
        }}>
          <Icon name="plus" size={28} color="#fff" />
        </View>
      ),
    }}
  />
  

  这里的阴影和圆角是为了增强视觉层级，你可以根据自己的UI需求调整参数。

• 确保点击区域正常
  如果按钮点击没有响应，给外层的View加上pointerEvents='auto'属性，保证触摸事件能正常触发。

内容的提问来源于stack exchange，提问作者Josef El Bez