React Native @react-native-community/blur Android端显示空白及导航异常求助

使用@react-native-community/blur的BlurView组件时，遇到iOS显示正常但Android端初始渲染空白的问题，通过自定义useIsMounted Hook解决首次挂载问题后，跳转到其他栈页面时新页面又会变为空白。尝试关闭栈动画、修改node_modules中BlurView.android的透明度等方案均无效。

问题根源分析 #

Android端BlurView依赖硬件加速渲染，且与React Navigation页面栈切换的生命周期存在冲突——即使关闭动画，组件渲染时机和页面栈切换不同步，导致上一页的BlurView残留渲染状态干扰新页面。自定义useIsMounted仅处理了组件首次挂载场景，未覆盖页面栈切换的情况。

可行解决方案 #

1. 基于页面焦点监听控制BlurView渲染

借助React Navigation的useFocusEffect，在页面获取焦点时延迟渲染BlurView，失去焦点时立即卸载，彻底避免跨页面的渲染干扰：

import { useFocusEffect } from '@react-navigation/native';
import { useCallback, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import BlurView from '@react-native-community/blur';

export default function TargetScreen() {
  const [showBlurView, setShowBlurView] = useState(false);

  useFocusEffect(
    useCallback(() => {
      // 延迟100ms渲染，给Android页面栈切换留足渲染缓冲时间
      const timer = setTimeout(() => {
        setShowBlurView(true);
      }, 100);

      // 离开页面时卸载BlurView，防止残留状态影响下一页
      return () => {
        clearTimeout(timer);
        setShowBlurView(false);
      };
    }, [])
  );

  return (
    <View style={styles.textContainer}>
      {showBlurView && (
        <BlurView
          style={[styles.blurContainer, StyleSheet.absoluteFill]}
          blurType="light"
          blurAmount={8} // 改用整数模糊值，部分Android设备对非整数支持不佳
          reducedTransparencyFallbackColor="rgba(0,0,0,0.15)"
        />
      )}
      {/* 你的模糊内容 */}
    </View>
  );
}

const styles = StyleSheet.create({
  textContainer: {
    flex: 1,
    // 避免父容器完全透明，可设置极浅底色替代，防止Android渲染异常
    backgroundColor: '#ffffff05',
  },
  blurContainer: {
    // 保持原有样式配置
  },
});

2. 辅助排查优化点

• 检查AndroidManifest.xml中是否开启硬件加速：<application android:hardwareAccelerated="true">，BlurView依赖硬件加速才能正常工作
• 升级@react-native-community/blur到最新版本，旧版本存在Android端栈切换的已知bug
• 避免在BlurView父容器中使用overflow: 'hidden'，该属性会干扰Android端模糊效果的渲染逻辑

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