React Native - Resimler
Bu bölümde, React Native'de resimlerle nasıl çalışılacağını anlayacağız.
Görüntü Ekleme
Yeni bir klasör oluşturalım img içinde srcKlasör. Resmimizi ekleyeceğiz (myImage.png) bu klasörün içinde.
Görüntüleri ana ekranda göstereceğiz.
App.js
import React from 'react';
import ImagesExample from './ImagesExample.js'
const App = () => {
return (
<ImagesExample />
)
}
export default App
Yerel görüntüye aşağıdaki sözdizimi kullanılarak erişilebilir.
image_example.js
import React, { Component } from 'react'
import { Image } from 'react-native'
const ImagesExample = () => (
<Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample
Çıktı
Ekran Yoğunluğu
React Native, görüntüleri farklı cihazlar için optimize etmenin bir yolunu sunar. @2x, @3xsonek. Uygulama, yalnızca belirli ekran yoğunluğu için gerekli olan görüntüyü yükleyecektir.
Aşağıdakiler, içindeki resmin isimleri olacaktır. img Klasör.
[email protected]
[email protected]
Ağ Görüntüleri
Ağ görüntülerini kullanırken requireihtiyacımız var sourceEmlak. Tanımlanması tavsiye edilir.width ve height ağ görüntüleri için.
App.js
import React from 'react';
import ImagesExample from './image_example.js'
const App = () => {
return (
<ImagesExample />
)
}
export default App
image_example.js
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