Làm việc với ảnh trong React Native

Bạn dễ dàng thêm ảnh vào app React Native. Dưới đây là những điều bạn cần biết về thành phần Image (ảnh) trong React Native.

Ảnh cung cấp nhiều giá trị cho ứng dụng mobile. Chúng có thể giúp minh hoạ các khái niệm, truyền đạt thông tin, tạo điểm hấp dẫn trực quan và cung cấp ngữ cảnh cho nội dung cụ thể mà bạn có thể không muốn người dùng ứng dụng bỏ qua.

Thành phần ảnh trong React Native

Thành phần ảnh trong React Native mặc định được cung cấp bởi thư viện React Native để kết xuất ảnh trong ứng dụng mobile. Thành phần này có thể tải ảnh từ cả nguồn cục bộ và từ xa. Nó cung cấp một số thuộc tính để tùy biến và tạo kiểu cho ảnh.

Để dùng thành phần ảnh trong ứng dụng, nhập Image từ thư viện react-native:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        source={require('./assets/my-image.jpg')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 100,
  },
});

Bên trên là một thành phần App đơn giản với một ảnh. Thành phần Image lấy thuộc tính style đặt width, height và borderRadius cho ảnh. Nó cũng lấy thuộc tính source tải ảnh từ file cục bộ nằm trong thư mục assets ở danh mục ứng dụng. Thuộc tính source xác định đường dẫn của ảnh bao gồm và có thể chấp nhận cả nguồn ảnh cục bộ và mạng/từ xa.

Ảnh cục bộ có sẵn trên thiết bị của người dùng. Bạn có thể lưu chúng tạm thời hoặc vĩnh viễn. Bạn có thể lưu ảnh nội bộ trong thư mục dự án của ứng dụng, chẳng hạn như assets. Bạn cũng có thể xác định ảnh nằm ngoài thư mục của app, chẳng hạn như thư mục camera của thiết bị hoặc thư viện ảnh. Dưới đây là ví dụ về đường dẫn nguồn tới một ảnh cục bộ:

<Image source={{ uri: 'file:///path/to/my-image.jpg' }} />

Các ảnh trên mạng được truyền qua web. Chúng có thể bao gồm URL HTTP/HTTPS hoặc URL dữ liệu được mã hóa base64, mà nhúng trực tiếp dữ liệu vào URL bằng scheme mã hóa Base64.

Thuộc tính tùy biến thành phần ảnh

Bạn có thể dùng một số thuộc tính để tạo kiểu và tùy biến thành phần React Native Image.

resizeMode

Thuộc tính resizeMode xác định cách React chỉnh lại kích thước và xác định vị trí ảnh trong container của nó. Có sẵn một số giá trị cho resizeMode. Mỗi giá trị tác động khác nhau tới ảnh.

• Cover: Giá trị này chia tỷ lệ ảnh đồng nhất để cả hai kích thước đều bằng nhau hoặc lớn hơn phần tử chứa nó. Ảnh này sau đó được căn giữa trong container. Dùng giá trị này có thể cho ảnh được cắt để duy trì tỷ lệ khung hình.
• Contain: Cố gắng khớp và căn giữa ảnh hoàn hảo trong kích thước của container. Tuy nhiên, điều này có thể cho vùng trống quanh các cạnh của ảnh.
• Stretch: Giá trị stretch kéo dài ảnh để nó lấp đầy toàn bộ container, ở mọi tỷ lệ. Đôi khi nó còn khiến ảnh bị méo.
• Repeat: Giá trị này lặp ảnh ở cả chiều ngang và dọc để lấp đầy toàn bộ container.
• Center: Điều này sẽ căn giữa ảnh trong nhân tố container mà không thu nhỏ nó.

onLoad

Đây là hàm callback. Nó chạy khi ảnh kết thúc quá trình tải. Bạn có thể dùng nó để triển khai hành động sau khi tải ảnh, chẳng hạn như update trạng thái của thành phần hay hiện thông báo tới người dùng.

onError

Thuộc tính onError sẽ chạy nếu hoặc khi tải ảnh thất bại. Nó cung cấp cách triển khai các tác vụ cần thiết nếu có lỗi trong khi cố gắng tải ảnh. Bạn có thể hiện thông báo lỗi tới người dùng hoặc thử tải lại ảnh.

defaultSource

Thuộc tính này chỉ định một ảnh dự phòng nếu tải ảnh chính thất bại. Bạn có thể dùng nó để cung cấp ảnh mặc định hoặc giữ chỗ trong khi tải ảnh chính.

Xử lý ảnh từ xa từ một API

Bạn có thể cần tải ảnh cho ứng dụng từ một API hoặc server từ xa và hiện nó trong ứng dụng. Bạn có thể dùng hàm fetch tích hợp trong React hoặc một thư viện truy vấn API như Axios cho mục đích này.

Ví dụ cách tìm nạp và hiện ảnh từ một API từ xa bằng hàm fetch:

const [imageUri, setImageUri] = useState(null);

useEffect(() => {
  fetch('https://example.com/api/images/1')
    .then(response => response.json())
    .then(data => setImageUri(data.url))
    .catch(error => console.error(error));
}, []);

return (
  <View>
    {imageUri ? (
      <Image source={{ uri: imageUri }} />
    ) : (
      <Text>Loading...</Text>
    )}
  </View>
);

Chạy code này trong ứng dụng sẽ tìm nạp một ảnh ở link thiết lập API từ xa. Ví dụ đầu tiên tạo một biến trạng thái cho imageUri. Trong hook useEffect, hàm fetch lấy imageUri và lưu nó trong biến trạng thái bằng setImage().

Cuối cùng, nó hiện thành phần Image với thuộc tính source làm URL của ảnh trong khi hiện chỉ báo đang tải.

Trên đây là những điều bạn cần biết về ảnh trong React Native. Hi vọng bài viết hữu ích với các bạn.