Khi chúng tôi đang phát triển Ứng dụng React Native, trong một số trường hợp, chúng tôi mong muốn ứng dụng hoạt động trên cả điện thoại di động và máy tính bảng (iPad, Android Tablets).

Một trong những thách thức đi kèm với loại yêu cầu này là các phong cách trực quan khác nhau chẳng hạn như kích thước phông chữ không điều chỉnh theo kích thước màn hình.

Các thiết bị iOS và Android có tỷ lệ pixel khác nhau. Nếu bạn đang xác định kích thước phông chữ bằng pixel thì kích thước có thể khác nhau giữa các thiết bị. Do đó, chúng tôi phải xác định mọi phông chữ, chiều rộng, chiều cao theo mật độ và kích thước pixel của thiết bị.

Giải pháp:

Loại vấn đề này với Ứng dụng React Native có thể được giải quyết bằng cách chuẩn hóa các kiểu theo tỷ lệ kích thước màn hình cố định.

Ví dụ: Dựa trên thang điểm iPhone 11

screenWidth = 414 screenHeight = 896

LƯU Ý: Bất kỳ thiết bị nào cũng có thể được xem xét cho các đầu vào quy mô cố định này. Tốt nhất hãy chọn thiết bị mà UX được thiết kế.

Sử dụng các thang đo cố định này để tính toán chiều rộng cơ sở và chiều cao cơ sở.

BƯỚC 1:

Đầu tiên, chúng ta cần trích xuất chiều cao và chiều rộng của màn hình bằng cách sử dụng Kích thước từ gói gốc phản ứng.

import { Dimensions } from 'react native';
const { 
  width: SCREEN_WIDTH, 
  height: SCREEN_HEIGHT 
  } = Dimensions.get('window');

const widthBaseScale = SCREEN_WIDTH / 414;
const heightBaseScale = SCREEN_HEIGHT / 896;

Sử dụng tỷ lệ cơ sở, chúng ta phải tạo ra một hàm tính toán kích thước phù hợp nhất.

import { PixelRatio } from 'react-native';
function normalize(size, based = 'width') {
 const newSize = (based === 'height') ? 
                 size * heightBaseScale : size * widthBaseScale;
return Math.round(PixelRatio.roundToNearestPixel(newSize));
}

BƯỚC 3:

Chức năng chuẩn hóa này có thể được sử dụng để tạo và xuất các hàm có thể được cung cấp với kích thước phông chữ, lề, khoảng đệm, chiều cao, chiều rộng, v.v.

//for width  pixel
const widthPixel = (size) => {
  return normalize(size, 'width');
};
//for height  pixel
const heightPixel = (size) => {
  return normalize(size, 'height');
};
//for font  pixel
const fontPixel = (size) => {
  return heightPixel(size);
};
//for Margin and Padding vertical pixel
const pixelSizeVertical = (size) => {
  return heightPixel(size);
};
//for Margin and Padding horizontal pixel
const pixelSizeHorizontal = (size) => {
  return widthPixel(size);
};
export {
  widthPixel,
  heightPixel,
  fontPixel,
  pixelSizeVertical,
  pixelSizeHorizontal
};

Các hàm được xuất ở trên có thể được sử dụng trong các bảng định kiểu để chuẩn hóa kích thước, như được hiển thị trong đoạn mã bên dưới.

const styles = StyleSheet.create({
 container: {
   paddingHorizontal: pixelSizeHorizontal(15),
   paddingVerticle: pixelSizeVertical(20),
   marginBottom: pixelSizeVertical(10),
   height: heightPixel(200),
   width: widthPixel(200),
 },
 
 title: {
   fontSize: fontPixel(18),
   paddingVerticle: pixelSizeVertical(10),
 },
})

Việc triển khai ở trên là một trong những cách đơn giản nhất để đạt được Giao diện người dùng có kích thước tốt trên các thiết bị có kích thước khác nhau.