React Native - Gambar

Di bab ini, kita akan memahami cara bekerja dengan gambar di React Native.

Menambahkan Gambar

Mari kita buat folder baru img di dalam srcmap. Kami akan menambahkan gambar kami (myImage.png) di dalam folder ini.

Kami akan menampilkan gambar di layar beranda.

App.js

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

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

Citra lokal dapat diakses menggunakan sintaks berikut.

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

Keluaran

Kepadatan Layar

React Native menawarkan cara untuk mengoptimalkan gambar untuk berbagai perangkat yang digunakan @2x, @3xakhiran. Aplikasi hanya akan memuat gambar yang diperlukan untuk kepadatan layar tertentu.

Berikut ini akan menjadi nama-nama gambar di dalam img map.

[email protected]
[email protected]

Gambar Jaringan

Saat menggunakan gambar jaringan, sebagai ganti require, kami membutuhkan sourceProperti. Direkomendasikan untuk mendefinisikanwidth dan height untuk gambar jaringan.

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

Keluaran