React Native – Bài 11: Images

Trong chương này, chúng ta sẽ hiểu cách làm việc với hình ảnh trong React Native.

Thêm hình ảnh

Tạo một thư mục mới img bên trong thư mục src . Chúng ta sẽ thêm hình ảnh của mình ( myImage.png ) vào trong thư mục này.

Chúng ta sẽ hiển thị hình ảnh trên màn hình chính.

App.js

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

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

Hình ảnh cục bộ có thể được truy cập bằng cú pháp sau.

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

Kết quả

Mật độ màn hình

React Native cung cấp một cách để tối ưu hóa hình ảnh cho các thiết bị khác nhau bằng cách sử dụng hậu tố @2x, @3x . Ứng dụng sẽ chỉ tải hình ảnh cần thiết cho mật độ màn hình cụ thể.

Sau đây sẽ là tên của hình ảnh bên trong thư mục img .

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

Hình ảnh mạng

Khi sử dụng hình ảnh mạng, thay vì yêu cầu , chúng tôi cần thuộc tính nguồn . Bạn nên xác định chiều rộng và chiều cao cho hình ảnh mạng.

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

đầu ra