如何为expo-blur的BlurView设置生效的borderRadius？

直接给BlurView设置borderRadius不生效，是因为expo-blur的模糊渲染逻辑在部分平台上会绕过视图的圆角裁剪。以下是两种可行的解决方式：

跨平台通用方案（推荐） #

用一个View容器包裹BlurView，给容器设置borderRadius和overflow: 'hidden'，让BlurView占满容器即可实现圆角效果：

import { View } from 'react-native';
import { BlurView } from 'expo-blur';

// 示例代码
<View style={{
  borderRadius: 10,
  overflow: 'hidden',
  width: 200, // 根据需求调整宽高
  height: 100,
}}>
  <BlurView
    intensity={50}
    style={{ flex: 1 }}
  >
    {/* 你的子内容 */}
  </BlurView>
</View>

原理是通过容器的overflow: 'hidden'裁剪内部的模糊视图，这种方式在iOS和Android上都能稳定生效。

iOS专属简化方案 #

如果只需要兼容iOS，可以给BlurView同时设置borderRadius和backgroundColor（即使是半透明背景），就能触发圆角裁剪：

<BlurView
  intensity={50}
  style={{
    borderRadius: 10,
    backgroundColor: 'rgba(255, 255, 255, 0.1)', // 必须设置背景色
    width: 200,
    height: 100,
  }}
>
  {/* 你的子内容 */}
</BlurView>

注意：这种方法在Android上无效，所以优先选择跨平台方案。

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