React Native启动报错:backdropFilter不是有效样式属性 代码未使用该属性
问题根因
- 你使用的
@emotion/native v11.0.0-next.12属于未正式发布的测试版本,存在兼容缺陷:未对Web端专属样式属性做过滤,会把backdropFilter这类Web CSS属性直接注入到React Native的StyleSheet中 - React Native 0.62.2本身不支持
backdropFilter属性,该属性是Web端专属样式,React Native原生从未直接支持该属性实现毛玻璃效果 - 从报错栈可明确看到,错误触发在
styles.ts第58行的emotion css样式生成阶段,不是业务代码主动书写导致的问题
解决方案
- 优先替换emotion版本:卸载测试版的emotion相关依赖,安装正式稳定版即可修复:
npm uninstall @emotion/core @emotion/native @emotion/react npm install @emotion/native@11.0.0 @emotion/react@11.0.0
- 若需要保留当前emotion版本,可在你的公共样式处理逻辑中新增属性过滤规则,主动剔除
backdropFilter等Web专属属性,避免传入RN StyleSheet - 如果你本身需要实现毛玻璃效果,不要使用
backdropFilter,直接用react-native-blur库的BlurView组件实现,可同时适配iOS和安卓端 - 临时验证方案:全局搜索整个项目(包含node_modules目录)的
backdropFilter关键词,如果是第三方依赖引入的该属性,使用patch-package给对应依赖打补丁移除属性即可
内容的提问来源于stack exchange,提问作者bufferoverflow76
相关产品推荐
相关产品推荐

