如何在React Native中实现带模糊效果的底部标签导航栏

核心问题分析 #

你当前使用VibrancyView未达到预期模糊效果，主要原因有两点：

• VibrancyView是iOS专属的颜色增强组件，需要配合BlurView使用，单独无法实现基础模糊效果；
• 布局层级存在问题，底部导航栏下方没有可被模糊的内容，或导航栏容器的背景设置遮挡了模糊效果。

修复方案 #

1. 替换组件并调整层级 #

将VibrancyView替换为BlurView，确保导航栏布局在页面内容上方，让模糊效果能捕捉到底层内容。

修改后的组件代码：

import { BlurView } from '@react-native-community/blur';

// ... 其他逻辑代码

return (
  <BlurView
    style={[styles.container, styles.blurViewStyle]}
    blurAmount={24}
    reducedTransparencyFallbackColor="rgba(255,255,255,0.8)"
    blurType="dark"
  >
    <NavigationIcon type={NavigationIcons.PAYMENTS} />
    <NavigationIcon isActive type={NavigationIcons.WALLET} />
    <NavigationIcon type={NavigationIcons.PROFILE} />
  </BlurView>
);

2. 优化样式设置 #

明确设置导航栏背景透明，调整边框透明度以贴合模糊风格，同时确保导航栏层级正确：

const styles = StyleSheet.create({
  container: {
    height: 84,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    borderTopColor: 'rgba(128,128,128,0.3)',
    borderStyle: 'solid',
    borderTopWidth: 0.5,
    backgroundColor: 'transparent',
  },
  blurViewStyle: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0,
    zIndex: 10,
  },
});

3. 确保内容可被模糊 #

页面主内容需要延伸至导航栏下方，同时避免内容被遮挡，可通过负边距实现：

// 主内容容器样式示例
mainContent: {
  flex: 1,
  paddingBottom: 84,
  marginBottom: -84,
}

4. iOS平台额外配置 #

在Info.plist中添加以下配置，确保模糊效果正常启用：

<key>UIBlurEffectStyle</key>
<string>dark</string>

效果验证 #

完成上述修改后，底部导航栏将呈现半透明模糊效果，图标和边框清晰叠加在模糊背景之上，与目标示例效果一致。

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