如何为@react-navigation/bottom-tabs底部标签栏添加阴影效果？

按下面的步骤修改配置即可生效：

• 新增overflow: 'visible'属性到tabBar的style中。React Navigation自带的TabBar默认开启了overflow: hidden，会直接裁剪阴影区域，这是绝大多数场景下阴影不显示的核心原因。
• 删除多余的边框配置：你当前配置的borderWidth:1、和背景色一致的borderColor会遮挡阴影边缘，直接删除这两个配置即可，不需要额外边框来隐藏分割线，直接设置borderTopWidth: 0就能去掉默认的顶部分割线。
• 预留阴影显示空间：因为你用了position: 'absolute'悬浮布局，要在页面容器的样式中添加底部内边距，数值等于TabBar高度加上阴影高度，避免页面内容挡住阴影区域，示例：paddingBottom: vpHeight*0.15 + 10。
• 高版本适配：如果你使用的是@react-navigation/bottom-tabs v6及以上版本，tabBarOptions已经被废弃，需要将样式配置到screenOptions的tabBarStyle属性中才能生效。

修改后的完整配置示例 #

// v5及以下版本写法
tabBarOptions={{  
  style: {
    position: 'absolute',
    backgroundColor: themeColorcontext.themeColor == 'light' ? '#fff' : '#222',
    borderTopLeftRadius: vpWidth*0.085,
    borderTopRightRadius: vpWidth*0.085,
    height: vpHeight*0.15,
    overflow: 'visible',
    shadowColor: themeColorcontext.themeColor == 'light' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)',
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 1,
    shadowRadius: 6,  
    elevation: 10,
    borderTopWidth: 0,
  },
}}

// v6及以上版本写法
<Tab.Navigator
  screenOptions={{
    tabBarStyle: {
      position: 'absolute',
      backgroundColor: themeColorcontext.themeColor == 'light' ? '#fff' : '#222',
      borderTopLeftRadius: vpWidth*0.085,
      borderTopRightRadius: vpWidth*0.085,
      height: vpHeight*0.15,
      overflow: 'visible',
      shadowColor: themeColorcontext.themeColor == 'light' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)',
      shadowOffset: { width: 0, height: 6 },
      shadowOpacity: 1,
      shadowRadius: 6,  
      elevation: 10,
      borderTopWidth: 0,
    }
  }}
>
{/* 页面配置 */}
</Tab.Navigator>

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