React Native 中 svg 文件的条件渲染答案

【问题标题】：Conditional rendering of svg files in react nativeReact Native 中 svg 文件的条件渲染
【发布时间】：2022-01-17 08:51:51
【问题描述】：

我有一个用于买卖狗的应用。在我的应用程序中，每个犬种都有自己的 svg 文件存储在我的资产文件夹中（大约 150 个 svg 文件）。从后端获取帖子数据时，我会得到关于帖子的不同信息，包括 dogBreed，例如{dogBreed：金毛猎犬}。我想为狗的每个帖子渲染相应的 svg，但我不确定处理这个问题的最佳方法是什么。我的应用应该导入所有 svg 文件吗？我应该将所有 svg 文件转换为 JSX 文件吗？我已经在应用程序的其他部分做到了这一点。如果我要使用 JSX 解决方案，我应该根据以下名称有条件地渲染 JSX：{dogBreed}/>（如果可能的话），还是应该让一个组件将狗品种作为道具并有条件渲染的逻辑？ .这将创建一个巨大的文件，我不确定 150 if else/switch 语句是否可行。我感觉真的被困在这里了。

【问题讨论】：

首先，如果它们是矢量图形，它们应该很小。其次，如果您使用 Webpack（如果您使用 Create React App 制作应用程序，您已经在使用它），您可以动态/延迟/异步导入它们。第三，既然你提到你正在使用后端，为什么不让静态矢量文件可用于 HTTP 检索，并只渲染一个 <image/> 和指向矢量文件的 src 属性？
stackoverflow 上已经有可以帮助您的解决方案。见stackoverflow.com/questions/61339259/…

标签： javascript reactjs typescript react-native svg

【解决方案1】：

首先，将所有 svg 文件转换为响应原生 JSX 文件。

然后您可以根据名称延迟加载 svg（我假设）类似的东西

const breedName = data.dogBreed;    
const component = React.lazy(() => import(`./assets/${breedName}.jsx`));

【讨论】：

谢谢，非常感谢。这解决了问题。延迟加载是我缺少的东西。也可以按照其他人的建议使用 react-native-svg-transformer 来放弃 JSX 转换。

【解决方案2】：

我建议你使用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} />

...

【讨论】：

【解决方案3】：

尝试使用这个库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 图标。试试看吧。

【讨论】：