نمایش svg در react native

تصاویر svg که با Scalable Vector Graphics نیز شناخته می شوند یک نوع markup language قابل توسعه برای تصاویر دوبعدی گرافیکی است.این نوع فرمت تصویر بین توسعه دهندگان وب و bobile مشهور است زیرا تصاویر با فرمت SVG بر پایه پیکسل نیستند ، بنابراین حتی در صورتی که کشیده شوند، محو یا برش داده نمی شوند.در react native ما به صورت مستقیم نمی توانیم SVG را نمایش دهیم.ما باید از کتابخانه react-native-svg استفاده کنیم.این کتابخانه توسط توسعه دهندگان در هر هفته 2500 بار دانلود می شود.در این مقاله ما تصاویر SVG را به صورت online از url و به صورت local نمایش می دهیم.نکته: کتابخانه react-native-svg فقط تصاویر SVG به صورت online را نمایش می دهد و ما نمی توانیم تصاویر SVG به صورت local را نمایش دهیم به همین دلیل از یک کتابخانه دیگر به نام react-native-svg-uri استفاده می کنیم.این کتابخانه بر پایه react-native-svg است و فقط قابلیت نمایش به صورت local را اضافه کرده است.1.اولین گام باید آخرین نسخه این کتابخانه را نصب کنیم.برای اینکار دایرکتوری پروژه را در cmd باز می کنیم و دستور زیر را اجرا میکنیم.npm install react-native-svg --save با توجه به اینکه نمیتونیم SVG های local رو با کتابخانه فوق نمایش بدهیم .بنابراین کتابخانه react-native-svg-uri رو نصب می کنیم .برای اینکار کافیه دستور زیر رو در دایرکتوری اصلی پروژه اجرا کنیمnpm install react-native-svg-uri --save2.تا حالا هر دو تا کتابخانه به پروژه ما اضافه شدند و نوبت به link کردن آن ها است.برای اینکار باید دستور زیر را اجرا کنیم.توجه داشته باشید که اگر نسخه react native شما بالاتر از 60 است، نیازی به اجرای دستور زیر نیستreact-native link react-native-svg3. ما تصاویر SVG را به هر دو صورت online و local نمایش می دهیم که برای نمایش به صورت local یک پوشه به نام images در root اصلی پروژه ایجاد می کنیم.4.تصاویر svg که قرار است به صورت local نمایش بدهیم.درون این پوشه قرار می دهیم.5.ایمپورت StyleSheet, Text وViewدر App.js:import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native';6.ایمپورت SvgUri از کتابخانه react-native-svg-uriimport SvgUri from 'react-native-svg-uri';7.فراخوانی console.disableYellowBox با مقدار true برای اینکه دیگر هشدار ها دیگر نمایش داده نشود.از این مرحله را می توانید صرف نظر کنید.console.disableYellowBox = true;8.ایجاد یک کلاس به نام Appexport default class App extends Component { }9.ما دو تا کامپوننت SvgUri در بلاک render’s return قرار می دهیم.اولی برای نمایش SVG به صورت online و دیگری برای نمایش SVG به صورت localrender() { return ( <View style={styles.MainContainer} > <Text style={styles.text}> Showing SVG Format Image Icon From URL in React Native </Text> <SvgUri width=&quot200&quot height=&quot200&quot source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}} /> <Text style={styles.text}> Showing SVG Format Image Icon Locally in React Native </Text> <SvgUri width=&quot200&quot height=&quot200&quot source={require('./images/camera_icon.svg')} /> </View> ); }10.ایجاد استایلconst styles = StyleSheet.create({ MainContainer: { alignItems: 'center', backgroundColor: '#fff' }, text: { padding: 20, textAlign: 'center', fontSize: 20 }, });11.کد کامل برنامه در فایل App.jsimport React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import SvgUri from 'react-native-svg-uri'; console.disableYellowBox = true; export default class App extends Component { render() { return ( <View style={styles.MainContainer} > <Text style={styles.text}> Showing SVG Format Image Icon From URL in React Native </Text> <SvgUri width=&quot200&quot height=&quot200&quot source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}} /> <Text style={styles.text}> Showing SVG Format Image Icon Locally in React Native </Text> <SvgUri width=&quot200&quot height=&quot200&quot source={require('./images/camera_icon.svg')} /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { alignItems: 'center', backgroundColor: '#fff' }, text: { padding: 20, textAlign: 'center', fontSize: 20 }, });اگر قصد دارید مقالات تخصصی بیشتری در زمینه React Native مطالعه کنید پیشنهاد میکنم به بخش آموزش متنی سایت مراجعه کنید.همچنین اگر قصد دارید به عنوان یک برنامه نویسی حرفه ای React Native فعالیت کنید پیشنهاد میکنم دوره آموزش ساخت اپلیکیشن فروشگاهی مشابه digikala با react native رو مشاهده کنید.اسکرین شات:[منبع]