نمایش 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 --save

2.تا حالا هر دو تا کتابخانه به پروژه ما اضافه شدند و نوبت به link کردن آن ها است.برای اینکار باید دستور زیر را اجرا کنیم.توجه داشته باشید که اگر نسخه react native شما بالاتر از 60 است، نیازی به اجرای دستور زیر نیست

react-native link react-native-svg

3. ما تصاویر 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-uri

import SvgUri from 'react-native-svg-uri';

7.فراخوانی console.disableYellowBox با مقدار true برای اینکه دیگر هشدار ها دیگر نمایش داده نشود.از این مرحله را می توانید صرف نظر کنید.

console.disableYellowBox = true;

8.ایجاد یک کلاس به نام App

export default class App extends Component {
}

9.ما دو تا کامپوننت SvgUri در بلاک render’s return قرار می دهیم.اولی برای نمایش SVG به صورت online و دیگری برای نمایش SVG به صورت local

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>
);
}

10.ایجاد استایل

const styles = StyleSheet.create({
MainContainer: {
alignItems: 'center',
backgroundColor: '#fff'
},
text: {
padding: 20,
textAlign: 'center',
fontSize: 20
},
});

11.کد کامل برنامه در فایل App.js

import 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 رو مشاهده کنید.

اسکرین شات:

[منبع]