گرافیک برداری مقیاس پذیر (SVG) بسیار رایج و آسان برای استفاده در هنگام ساخت پروژه های وب است، اما متاسفانه، آنها در حال حاضر به طور پیش فرض در react native پشتیبانی نمی شوند.
سلام، آیا شما یک مبتدی هستید، آیا با استفاده از SGV ها مشکل دارید یا قصد دارید از آن در پروژه react native خود استفاده کنید؟ بسیار خوب، اجازه دهید در چند مرحله شما را راهنمایی کنم.
فقط در صورتی که می خواهید SGV های زیبا را ببینید https://undraw.co/
بیا بریم!
-
مرحله 1. یک پروژه react native ایجاد کنید. من از نمایشگاه استفاده خواهم کرد.
npx create-expo-app MySvgApp. شما می توانید مال خود را هر چه می خواهید صدا کنید -
پروژه خود را در ویرایشگر کد خود باز کرده و اجرا کنید
expo install react-native-svg. این بسته جادوی ما را انجام خواهد داد!. -
یک کامپوننت بسازید و آن را فراخوانی کنید SVGWrapper، سپس
import {SvgXml} from 'react-native-svg'; -
یک تصویر SVG را دانلود کنید، برای باز کردن آن کلیک کنید، سپس همه چیز را بین تگ های svg کپی کنید و آن را به عنوان یک ثابت ذخیره کنید.
const svgImg = <svg>.....</svg>. اطمینان حاصل کنید که برچسب ها را در یک بسته بندی کنید تیک برگشتی. “
توجه: من بیشتر محتوای svg را حذف کردم تا تصویر ساده باشد.
5.یک کامپوننت دیگر در SVGWrapper ایجاد کنید و آن را فراخوانی کنید دوستش دارم. دوباره هر چه می خواهید آن را صدا کنید، سپس می توانید بلافاصله برگردید <SvgXml xml={svgImg} width="200px" height="200px /> به عنوان یک مؤلفه خود بسته شونده با پایه xml که به ثابت svgImg اشاره می کند، همچنین پایه های عرض و ارتفاع را ارائه می دهد.
6. در نهایت، بازگشت دوستش دارم به عنوان یک جزء خود بسته شونده اکنون تصویر SVG ما آماده استفاده است!.
برو جلو و وارد کن SVGWrapper به هر مؤلفه ای که می خواهید از آن استفاده کنید و بس.
با تشکر برای خواندن.
