[英]Conditional rendering of svg files in react native
我有一个买卖狗的应用程序。 在我的应用程序中,每个犬种都有自己的 svg 文件存储在我的资产文件夹中(大约 150 个 svg 文件)。 从后端获取帖子数据时,我会得到关于帖子的不同信息,包括 dogBreed,例如 {dogBreed: golden-retriver}。 我想为狗的每个帖子渲染相应的 svg,但我不确定处理这个问题的最佳方法是什么。 我的应用程序是否应该导入所有 svg 文件? 我应该将所有 svg 文件转换为 JSX 文件吗? 我已经在应用程序的其他部分做到了这一点。 如果我要使用 JSX 解决方案,我应该根据以下名称有条件地渲染 JSX:<$ {dogBreed}
/>(如果可能的话),还是应该让一个组件将狗品种作为道具并有条件渲染的逻辑? . 这会创建一个巨大的文件,我不确定 150 if else/switch 语句是否是通往 go 的方式。 我觉得真的被困在这里了。
首先,将您的所有 svg 文件转换为反应原生 JSX 文件。
然后您可以根据名称延迟加载 svg(我假设)类似
const breedName = data.dogBreed;
const component = React.lazy(() => import(`./assets/${breedName}.jsx`));
我建议您使用react-native-svg-transformer
库。
以下是该库的链接: https://github.com/kristerkari/react-native-svg-transformer
该库允许您导入 svg 文件而不进行转换。
配置后,您可以执行类似的操作。
...
import LogoA from "./logo_a.svg";
import LogoB from "./logo_b.svg";
...
return cond ? <LogoA width={120} height={40} /> : <LogoB width={120} height={40} />
...
尝试使用这个库https://github.com/stowball/react-native-svg-icon 。 在一个文件中将所有 svg 转换为 JSX。
创建一个组件作为导入上述 SVG 的 react-native-svg-icon 之间的桥梁
您可以直接将其用作组件。
import Icon from './components/Icon';
// Inside some view component
render() {
return (
<Fragment>
<Icon name="SortArrows" height="20" width="20" />
<Icon name="Tick" fill="#0f0" viewBox="0 0 200 200" />
<Icon name="Star" fill="transparent" stroke="#fff" strokeWidth="5"
/>
</Fragment>
);
}
您可以将名称设置为动态以呈现动态 svg 图标。 试一试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.