★ FEATURED ARTICLE AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载本指南以 AASAgentic Awesome Skills仓库中building-native-ui技能的 gradients.md 参考文档为核心系统讲解如何基于 React Native 的 New ArchitectureFabric与 Expo SDK 56用 CSS 语法在原生View上绘制线性、径向与多重渐变。读完你将掌握experimental_backgroundImage的完整写法、颜色停靠点与方向/角度的取值规则并能直接套用「图片遮罩、毛玻璃、渐变按钮」三个高频实战模式实现无需expo-linear-gradient的原生渐变 UI。前置条件仅限新架构FabricCSS 渐变并不是 React Native 的传统能力它依赖新架构Fabric对 CSS 样式属性的底层支持。因此在使用前必须确认必须启用 React Native 的 New ArchitectureFabric旧架构Legacy Architecture下该属性不生效Expo Go 中不可用需要自定义开发构建development build在 building-native-ui 技能总览 中该技能对运行方式给出过明确优先级总是先尝试 Expo Go再考虑自定义构建。而渐变恰好属于需要自定义构建的特性——当项目里同时存在experimental_backgroundImage这类新架构专属 API 时就不能依赖 Expo Go应使用npx expo run:ios/npx expo run:android或eas build生成开发构建来验证效果。判断当前是否处于新架构Expo SDK 52 默认启用新架构SDK 56 及更高版本完全移除旧架构。若使用较低版本需在app.json中确认newArchEnabled配置后再使用本指南的写法。核心 APIexperimental_backgroundImageexperimental_backgroundImage是样式属性style property接受CSS 渐变字符串用法与 Web 端background-image高度一致View style{{ experimental_backgroundImage: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) }} /几条关键事实与 CSS 规范保持一致渐变值是字符串string不是对象也不是数组颜色停靠点color stop使用百分比0%、50%、100%透明度可用rgba()或transparent关键字表达该属性名带experimental_前缀说明它仍是实验性 API在未来的 React Native 版本中可能更名或调整行为生产使用前请核对当前 RN/Expo 版本文档。线性渐变Linear Gradientslinear-gradient支持四种典型方向写法均在View上直接使用// 从上到下 View style{{ experimental_backgroundImage: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) }} / // 从左到右 View style{{ experimental_backgroundImage: linear-gradient(to right, #ff0000 0%, #0000ff 100%) }} / // 对角线45 度三色渐变 View style{{ experimental_backgroundImage: linear-gradient(45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%) }} / // 使用任意角度135 度透明到黑色 View style{{ experimental_backgroundImage: linear-gradient(135deg, transparent 0%, black 100%) }} /方向与角度取值规则方向关键字to top、to bottom、to left、to right以及组合方向如to top left、to top right、to bottom left、to bottom right角度值45deg、90deg、135deg等任意度数0deg指向顶部、90deg指向右侧按顺时针旋转颜色停靠点0%、50%、100%多色渐变通过在括号内追加更多「颜色 百分比」对实现例如上面三色示例在 50% 处插入中间色。径向渐变Radial Gradientsradial-gradient以某一点为中心向外扩散支持圆形circle与椭圆ellipse两种形态// 圆居中 View style{{ experimental_backgroundImage: radial-gradient(circle at center, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%) }} / // 椭圆居中 View style{{ experimental_backgroundImage: radial-gradient(ellipse at center, #fff 0%, #000 100%) }} / // 定位到左上角红到透明 View style{{ experimental_backgroundImage: radial-gradient(circle at top left, #ff0000 0%, transparent 70%) }} /写法拆解语法为radial-gradient(shape at position, color stop...)。shapecircle正圆或ellipse椭圆默认值positioncenter、top left、top right、bottom left、bottom right等位置关键字color stop与线性渐变相同百分比 颜色上面第三个示例把终点设在70%使渐变在 70% 处即完全透明适合制作柔和的光晕/高光。多重渐变Multiple Gradients将多个渐变用逗号分隔堆叠在同一属性值里即可实现复杂的分层背景。位于前面的渐变层级在上View style{{ experimental_backgroundImage: linear-gradient(to bottom, transparent 0%, black 100%), radial-gradient(circle at top right, rgba(255, 0, 0, 0.5) 0%, transparent 50%) }} /该示例在一个View上同时绘制「上到下的暗角」与「右上角的红色光晕」是沉浸式视觉效果的常用手法。注意模板字符串中的换行与缩进不会影响解析但务必保证各渐变之间用英文逗号分隔。常见实战模式Common Patterns以下三个模式可直接复制进组件使用均继承自原文档完整代码。图片上的渐变遮罩Overlay on Image通过绝对定位的View叠加在图片上方实现底部渐入式文字区View style{{ position: relative }} Image source{{ uri: ... }} style{{ width: 100%, height: 200 }} / View style{{ position: absolute, inset: 0, experimental_backgroundImage: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%) }} / /View要点外层容器position: relative遮罩层position: absolute配合inset: 0铺满整张图片渐变方向to top保证底部不透明、顶部透明。毛玻璃效果Frosted Glass Effect渐变 backdropFilter组合出 iOS 风格毛玻璃质感View style{{ experimental_backgroundImage: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%), backdropFilter: blur(10px), }} /这里backdropFilter: blur(10px)对背景内容做 10px 模糊配合极低透明度的白色渐变模拟玻璃透光效果。若追求更强系统级毛玻璃或需要兼容降级可参考同技能下的 visual-effects.md它记录了expo-blur的BlurViewtintsystemMaterial、intensity0-100、圆角需配overflow: hidden以及 iOS 26 的expo-glass-effectGlassView、isInteractive、isLiquidGlassAvailable()检测可根据平台能力在渐变毛玻璃与系统模糊之间切换。渐变按钮Button Gradient把experimental_backgroundImage用在Pressable上配合圆角与内边距即可得到原生质感按钮Pressable style{{ experimental_backgroundImage: linear-gradient(to bottom, #4CAF50 0%, #388E3C 100%), padding: 16, borderRadius: 8, }} Text style{{ color: white, textAlign: center }}Submit/Text /Pressable渐变色的使用不局限于View凡接受样式的原生组件Pressable、Text等都可套用。实际项目中还可以把渐变按钮封装为可复用组件并配合按压态pressed切换不同渐变角度形成按下反馈。重要注意事项Important Notes最后是原文档强调的一组易错点务必逐条遵守不要使用expo-linear-gradient—— 在新架构下直接用 CSS 渐变即可避免额外引入依赖这也与 SKILL.md 中「CSS 和 Tailwind 不受支持使用内联样式」的代码风格保持一致渐变字符串本身即内联样式的一部分渐变色是字符串不是对象experimental_backgroundImage只接受linear-gradient(...)/radial-gradient(...)这样的字符串透明度使用rgba()如rgba(0, 0, 0, 0.8)或transparent关键字颜色停靠点用百分比0%、50%、100%方向关键字to top、to bottom、to left、to right、to top left等角度值45deg、90deg、135deg等。从技能生态看渐变的使用边界在 AAS 仓库的building-native-ui技能体系中渐变并不仅用于背景在 tabs.md 中原生 Tab 图标支持renderingModeoriginal来保留源文件的渐变色彩NativeTabs.Trigger.Icon src{require(./gradient.png)} renderingModeoriginal /而template模式则会被统一着色为单色——这解释了为什么带渐变色的图标必须使用original模式结合 SKILL.md 的样式规则{ borderCurve: continuous }圆角、flex gap 优先、内联样式优先渐变应当作为内联 style 的一部分编写不必额外创建样式表。总结主题关键结论运行前提仅新架构Fabric可用Expo Go 不支持需自定义开发构建核心 APIexperimental_backgroundImage值为 CSS 渐变字符串线性渐变linear-gradient(direction|angle, color stop...)径向渐变radial-gradient(circle|ellipse at position, color stop...)多重渐变逗号分隔多个渐变前者层级在上典型模式图片遮罩、毛玻璃配合backdropFilter、渐变按钮易错点不用expo-linear-gradient值是字符串停靠点用百分比这套 CSS 渐变方案是 React Native 新架构下替代第三方渐变库的标准做法。在实际项目中建议先在模拟器中用自定义开发构建验证显示效果再结合 visual-effects.md 的系统模糊与液态玻璃方案搭建出完整、平台一致的现代化原生 UI。赞分享AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载相关推荐React Native 新架构下的 CSS 渐变实战用 experimental_backgroundImage 为 Expo 应用绘制线性、径向与叠加渐变React Native 新架构下的 CSS 渐变实战用 experimental_backgroundImage 为 Expo 应用绘制线性、径向与叠加渐变在 Expo / React Native 中启用 WebGPU 与 Three.js基于 autoskills building-native-ui Skill 的完整实战指南在 Expo / React Native 中启用 WebGPU 与 Three.js基于 autoskills building native ui Ski在 Expo 与 React Native 中原生接入 WebGPU 与 Three.js基于 building-native-ui 技能指南的完整实战手册在 Expo 与 React Native 中原生接入 WebGPU 与 Three.js基于 building native ui 技能指南的完整实战手册AI 技能AI 插件人工智能上一篇如何优化Laravel Versionable性能版本数量限制与存储策略下一篇Cursor Pro免费激活终极指南三步解锁AI编程神器的高级功能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
