为 React Native 应用程序调整自定义 Illustrator UI

Question

我正在构建一个主要活动的应用程序，其 UI 看起来像电视遥控器。当用户通过点击与 UI 交互时，我需要向用户显示交互式响应。

UI 是使用 Illustrator 创建的。我正在寻找一些 SVG 解决方案，但只找到了动画和变形库。事实证明我需要重新加载部分 UI，因为每次点击都重新加载所有内容似乎对性能很重要。

对于这个问题有什么好的解决方案？部分加载SVG并将其与css放在一起？如果没有办法，我什至会考虑迁移到原生 Android，因为我的应用程序依赖于一些手机硬件控制。顺便说一句，我还将把设计转移到 Adob​​e XD 来创建原型，所以也许有一些东西可以让生活更轻松。

Answer 1

所以这是我解决这个问题的一种方法：

1. 为要导出的插图图层命名（即使是隐藏图层也应显示为要导出）
2. 将选定的画板导出为带有内部 CSS 的 SVG，并为对象 ID 选择“图层名称”
3. 在编辑器中打开 SVG 并根据需要调整初始样式（渐变、笔触、要切换的隐藏图层等）。
4. 使用SVGR将SVG转换为React组件
5. 设置组件位置
6. 将 props 传递给 React 组件以在运行时更改样式并与用户交互