我有一個買賣狗的應用程式。在我的應用程式中，每個狗品種都有自己的 svg 檔案存盤在我的資產檔案夾中（大約 150 個 svg 檔案）。從后端獲取帖子資料時，我會獲得有關帖子的不同資訊，包括 dogBreed，例如 {dogBreed：golden-retriver}。我想將相應的 svg 渲染到每個狗的帖子，但我不確定處理這個問題的最佳方法是什么。我的應用程式應該匯入所有 svg 檔案嗎？我應該將所有 svg 檔案轉換為 JSX 檔案嗎？我已經在應用程式的其他部分做到了這一點。如果我要使用 JSX 解決方案，我是否應該根據以下名稱有條件地呈現 JSX：<${dogBreed}/> （如果可能），或者我應該有一個組件將狗品種作為道具并在其中包含用于條件渲染的邏輯？. 這將創建一個巨大的檔案，我不確定是否 150 if else/switch 陳述句是要走的路。我真的覺得卡在這里了。
uj5u.com熱心網友回復：
首先，將所有 svg 檔案轉換為對原生 JSX 檔案做出反應。
然后你可以根據名稱延遲加載 svg（我假設）像
const breedName = data.dogBreed;
const component = React.lazy(() => import(`./assets/${breedName}.jsx`));
uj5u.com熱心網友回復：
我建議你使用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} />
...
uj5u.com熱心網友回復：
嘗試使用這個庫https://github.com/stowball/react-native-svg-icon。將所有 svgs 轉換為一個檔案中的 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 圖示。試試看吧。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385003.html
標籤：javascript 反应 打字稿 反应原生 svg
上一篇：減少svg圖中條形之間的間隙