Làm việc với hình ảnh trong React Native
Hình ảnh cung cấp nhiều giá trị cho các ứng dụng di động. Chúng có thể giúp minh họa các khái niệm, truyền đạt thông tin, tạo sự quan tâm 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 của mình bỏ lỡ.
Mục Lục
Thành phần hình ảnh gốc phản ứng
Thành phần hình ảnh React Native là thành phần mặc định do thư viện React Native cung cấp để hiển thị hình ảnh trong ứng dụng dành cho thiết bị di động của bạn. Thành phần này có thể tải hình ảnh từ cả nguồn cục bộ và nguồn từ xa. Nó cung cấp một số đạo cụ để tùy chỉnh và tạo kiểu cho hình ảnh được hiển thị.
Để sử dụng thành phần hình ảnh trong ứng dụng của bạn, hãy nhập Hình ảnh từ phản ứng tự nhiên thư viện:
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,
},
});
Trên đây là một đơn giản Ứng dụng thành phần với một hình ảnh. Các Hình ảnh thành phần mất một phong cách prop đặt chiều rộng, chiều caoVà bán kính biên giới của hình ảnh. Nó cũng mất một nguồn prop tải hình ảnh từ tệp cục bộ nằm trong thư mục “nội dung” trong thư mục ứng dụng. Các nguồn prop xác định đường dẫn của hình ảnh để đưa vào và có thể chấp nhận cả nguồn hình ảnh cục bộ và mạng/từ xa.
Hình ảnh cục bộ có sẵn trên thiết bị của người dùng và bạn có thể lưu trữ chúng tạm thời hoặc vĩnh viễn. Bạn có thể lưu trữ hình ảnh cục bộ trong thư mục dự án của ứng dụng, chẳng hạn như tài sản thư mục. Bạn cũng có thể định vị hình ảnh bên ngoài thư mục của ứng dụng, chẳng hạn như trong cuộn camera của thiết bị hoặc thư viện ảnh. Đây là một ví dụ về đường dẫn nguồn đến một hình ảnh cục bộ:
<Image source={{ uri: 'file:///path/to/my-image.jpg' }} />
Hình ảnh mạng được gửi qua web. Chúng có thể bao gồm URL HTTP/HTTPS hoặc URI dữ liệu được mã hóa base64, giúp nhúng dữ liệu trực tiếp vào URL bằng sơ đồ mã hóa Base64.
Đạo cụ để tùy chỉnh thành phần hình ảnh
Có một số đạo cụ bạn có thể sử dụng để tạo kiểu và tùy chỉnh thành phần Hình ảnh gốc React.
thay đổi kích thướcMode
Các thay đổi kích thướcMode prop xác định cách React nên thay đổi kích thước và định vị hình ảnh trong vùng chứa của nó. Có một số giá trị có sẵn cho thay đổi kích thướcModemỗi trong số đó sẽ ảnh hưởng khác nhau đến hình ảnh.
- che phủ: Giá trị này sẽ chia tỷ lệ hình ảnh một cách đồng nhất sao cho cả hai chiều đều bằng hoặc lớn hơn phần tử chứa hình ảnh. Hình ảnh sau đó được căn giữa trong vùng chứa. Sử dụng giá trị này có thể dẫn đến hình ảnh bị cắt để duy trì tỷ lệ khung hình.
- bao gồm: Thao tác này sẽ cố gắng khớp và căn giữa hình ảnh một cách hoàn hảo trong các kích thước của vùng chứa. Tuy nhiên, điều này có thể dẫn đến không gian trống xung quanh các cạnh của hình ảnh.
- kéo dài: Các kéo dài giá trị kéo dài hình ảnh để lấp đầy toàn bộ vùng chứa, bất kể tỷ lệ khung hình. Đôi khi làm cho hình ảnh bị biến dạng.
- lặp lại: Giá trị này lặp lại hình ảnh theo cả chiều ngang và chiều dọc để lấp đầy toàn bộ vùng chứa.
- trung tâm: Thao tác này sẽ căn giữa hình ảnh trong phần tử vùng chứa mà không thu nhỏ hình ảnh.
đang tải
Đây là chức năng gọi lại chạy khi hình ảnh tải xong. Bạn có thể sử dụng nó để thực hiện các hành động sau khi tải hình ảnh, chẳng hạn như cập nhật trạng thái của thành phần hoặc hiển thị thông báo cho người dùng.
onLỗi
Các onLỗi prop sẽ chạy nếu hoặc khi hình ảnh không tải được. Nó cung cấp một cách để thực hiện các hành động cần thiết nếu có lỗi trong khi cố tải hình ảnh. Bạn có thể hiển thị thông báo lỗi cho người dùng hoặc thử tải lại hình ảnh.
nguồn mặc định
Chỗ dựa này chỉ định một hình ảnh dự phòng để hiển thị nếu hình ảnh chính không tải được. Bạn có thể sử dụng nó để cung cấp hình ảnh mặc định hoặc hình ảnh giữ chỗ trong khi hình ảnh chính đang tải.
Xử lý hình ảnh từ xa từ API
Bạn có thể cần lấy hình ảnh cho ứng dụng của mình từ API hoặc máy chủ từ xa và hiển thị hình ảnh đó trong ứng dụng của bạn. Bạn có thể sử dụng React tích hợp tìm về chức năng hoặc thư viện yêu cầu API như Axios cho mục đích này.
Dưới đây là ví dụ về cách tìm nạp và hiển thị hình ảnh từ API từ xa bằng cách sử dụng tìm về chức năng:
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 mã này trong ứng dụng của bạn sẽ tìm nạp hình ảnh từ liên kết API từ xa đã đặt. Ví dụ đầu tiên tạo một biến trạng thái cho hình ảnhUri. Trong vòng một sử dụnghiệu ứng cái móc, cái tìm về hàm truy xuất imageUri và lưu trữ nó trong biến trạng thái bằng cách sử dụng setImageUri().
Cuối cùng, nó làm cho Hình ảnh thành phần với nguồn prop được đặt thành URI của hình ảnh trong khi chỉ báo tải hiển thị, đợi hình ảnh hiển thị.
Sử dụng Đề xuất chính sách bộ đệm để kiểm soát hành vi bộ đệm
Trình duyệt của bạn có thể lưu các hình ảnh mà nó tải từ các URL từ xa vào bộ nhớ cache, vì vậy, nó có thể tải lại chúng một cách nhanh chóng trong tương lai. Bạn có thể tùy chỉnh hành vi của hình ảnh được lưu trong bộ nhớ cache bằng cách sử dụng bộ đệm chống đỡ. Prop này có thể chỉ định cách một trình duyệt nên lưu trữ hình ảnh và cách nó sẽ làm mất hiệu lực bộ đệm đó.
Bộ nhớ cache prop có thể nhận các giá trị như mặc định, tải lại, buộc lưu vào bộ nhớ cache, Và chỉ-nếu-được lưu trong bộ nhớ cache.
Đây là một ví dụ về cách sử dụng bộ đệm prop để kiểm soát hành vi bộ đệm của hình ảnh:
<Image
source={{
uri: 'https://example.com/images/my-image.png',
cache: 'force-cache',
cacheKey: 'my-image',
immutable: true
}}
/>
Các bộ đệm thuộc tính được đặt thành ‘buộc bộ đệm’cho biết rằng trình duyệt sẽ tải hình ảnh từ bộ đệm nếu có, ngay cả khi phiên bản bộ đệm đó đã cũ.
Một chỗ dựa mới khóa bộ đệm cũng đang chơi ở đây. Nó được đặt thành ‘hình ảnh của tôi’sẽ đóng vai trò là khóa bộ nhớ cache tùy chỉnh mà bạn có thể sử dụng để tham chiếu hình ảnh được lưu trong bộ nhớ cache sau này.
Ngoài ra, các bất biến thuộc tính được đặt thành ĐÚNG VẬYthông báo cho trình duyệt coi mục nhập bộ đệm này là bất biến và không bao giờ làm mất hiệu lực của nó.
Tất cả là về hình ảnh
Thành phần React Native Image cung cấp một phương tiện mạnh mẽ và linh hoạt để hiển thị hình ảnh, bao gồm tạo kiểu, xử lý hình ảnh từ xa và kiểm soát hành vi của bộ đệm.
Đối với hình ảnh từ xa, bạn luôn có thể sử dụng trình giữ chỗ để hiển thị hình ảnh hoặc văn bản tạm thời trong khi hình ảnh từ xa đang tải. Điều này sẽ tạo ra trải nghiệm người dùng tốt hơn bằng cách cung cấp phản hồi trực quan ngay lập tức và ngăn không cho ứng dụng có vẻ không phản hồi.