آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو

4 سال پیش

امتیاز دهید post

آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

افزودن تصویر

اجازه دهید یک پوشه جدید در داخل پوشه src ایجاد کنیم. ما تصویر خود (myImage.png) را به داخل این پوشه اضافه خواهیم کرد.

ما تصاویر را در صفحه اصلی نشان خواهیم داد.

App.js

import React from 'react';
import ImagesExample from './ImagesExample.js'

const App = () =&gt; {
   return (
      &lt;ImagesExample /&gt;
   )
}
export default App

import React from 'react';

import ImagesExample from './ImagesExample.js'

const App = () => {

return (

)

}

export default App

با استفاده از نحو زیر می توان به تصویر محلی دسترسی داشت.

image_example.js

import React, { Component } from 'react'
import { Image } from 'react-native'

const ImagesExample = () =&gt; (
   &lt;Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} /&gt;
)
export default ImagesExample

import React, { Component } from 'react'

import { Image } from 'react-native'

const ImagesExample = () => (

)

export default ImagesExample

خروجی

React Native Images

تراکم صفحه

React Native راهی برای بهینه سازی تصاویر برای دستگاه های مختلف با استفاده از پسوند @ 2x ، @ 3x ارائه می دهد. برنامه فقط تصویر لازم برای تراکم خاص صفحه را بارگیری می کند.

در زیر نام تصویر داخل پوشه img خواهد بود.

my-image@2x.jpg
my-image@3x.jpg

1 2	my-image@2x.jpg my-image@3x.jpg

تصاویر شبکه

هنگام استفاده از تصاویر شبکه، به ویژگی منبع نیاز داریم. توصیه می شود عرض و ارتفاع تصاویر شبکه را مشخص کنید.

App.js

import React from 'react';
import ImagesExample from './image_example.js'

const App = () =&gt; {
   return (
      &lt;ImagesExample /&gt;
   )
}
export default App

import React from 'react';

import ImagesExample from './image_example.js'

const App = () => {

return (

)

}

export default App

image_example.js

import React, { Component } from 'react'
import { View, Image } from 'react-native'

const ImagesExample = () =&gt; (
   &lt;Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
   style = {{ width: 200, height: 200 }}
   /&gt;
)
export default ImagesExample

import React, { Component } from 'react'

import { View, Image } from 'react-native'

const ImagesExample = () => (

<Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}

style = {{ width: 200, height: 200 }}

)

export default ImagesExample

خروجی

Network Images

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

امتیاز دهید post

نویسنده مطلب saber

آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو

آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو

افزودن تصویر

App.js

image_example.js

خروجی

تراکم صفحه

تصاویر شبکه

App.js

image_example.js

خروجی

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو

افزودن تصویر

App.js

image_example.js

خروجی

تراکم صفحه

تصاویر شبکه

App.js

image_example.js

خروجی

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه