[英]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.