CodeKitHubCông Cụ Này Là Gì?
Trong React Native, bóng đổ không đa nền tảng theo mặc định. iOS sử dụng bốn thuộc tính style riêng biệt (shadowColor, shadowOffset với width/height, shadowOpacity từ 0-1, và shadowRadius cho độ mờ) tương ứng với cùng một bóng đổ CoreAnimation mà box-shadow trên web sử dụng. Hệ thống View gốc của Android hoàn toàn không hỗ trợ hình dạng bóng đổ tùy ý — nó chỉ hỗ trợ elevation, một con số duy nhất tạo ra bóng đổ Material Design cố định dựa trên việc view đó trông "cao" đến mức nào.
Điều này có nghĩa là một bóng đổ trông đúng trên iOS khi dùng shadowRadius/shadowOpacity sẽ không hiển thị gì cả trên Android trừ khi bạn cũng đặt elevation, và hai nền tảng sẽ không bao giờ trông giống hệt nhau từng pixel vì hình dạng bóng đổ của elevation không thể tùy chỉnh như của iOS. Kể từ React Native 0.74 với New Architecture được bật, thuộc tính style boxShadow đa nền tảng cũng đã có sẵn, sử dụng cú pháp giống như CSS.
Tại Sao Nên Dùng?
- Xem bản xem trước trực quan trực tiếp khi bạn điều chỉnh offset, độ mờ, độ trong suốt và màu sắc — thay vì đoán giá trị rồi build lại ứng dụng để kiểm tra.
- Nhận các thuộc tính bóng đổ của iOS, elevation của Android, và chuỗi boxShadow đa nền tảng mới hơn cùng một lúc, để bạn không phải tra cứu ba API khác nhau.
- Elevation là một điều khiển riêng biệt (không được tự động tính toán từ độ mờ/độ trong suốt) vì ánh xạ elevation sang hình dạng bóng đổ trên Android không phải là bản dịch trực tiếp từ các thuộc tính bóng đổ của iOS — bạn cần tinh chỉnh nó sao cho khớp trực quan, và công cụ này cho phép bạn làm điều đó song song.
- Miễn phí, tức thì, và sẵn sàng sao chép dưới dạng một style object duy nhất.
Cách Sử Dụng
- Điều chỉnh offset X/Y, bán kính độ mờ, độ trong suốt và màu bóng đổ — hộp xem trước cập nhật trực tiếp.
- Tinh chỉnh riêng số elevation của Android cho đến khi khớp trực quan với cường độ bóng đổ mong muốn.
- Nhấp "Sao chép" để sao chép toàn bộ style object, bao gồm các thuộc tính iOS, elevation Android, và chuỗi boxShadow.
- Dán object đó vào StyleSheet của component — trải (spread) hoặc gộp nó với các style view hiện có của bạn.
Ví dụ
Đầu vào
Offset (0, 4), độ mờ 8, độ trong suốt 0.25, đen, elevation 5Đầu ra
shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'shadowRadius được đặt bằng một nửa giá trị độ mờ hiển thị trong bản xem trước, phù hợp với cách bán kính độ mờ CSS liên quan đến shadowRadius của iOS trong thực tế.
Câu Hỏi Thường Gặp
Tại sao bóng đổ của tôi không hiển thị trên Android?
Các thuộc tính shadowColor/shadowOffset/shadowOpacity/shadowRadius chỉ dành cho iOS — bộ render gốc của Android đơn giản là bỏ qua chúng. Bạn cần đặt thêm thuộc tính elevation (một số dương) để bóng đổ có thể xuất hiện trên Android.
Tôi có thể làm cho bóng đổ trên Android trông giống hệt trên iOS không?
Không hoàn toàn — elevation tạo ra hình dạng bóng đổ Material Design tích hợp sẵn của Android, thứ không thể cấu hình độc lập về màu sắc, hướng offset hay độ mờ như bóng đổ của iOS. Bạn có thể tinh chỉnh số elevation để có cường độ trông tương tự, nhưng khớp hoàn hảo từng pixel giữa các nền tảng là không thể với các API shadow/elevation cổ điển.
Thuộc tính boxShadow là gì và tôi có thể dùng nó thay thế không?
boxShadow là một thuộc tính style đa nền tảng mới hơn, thực sự hoạt động trên mọi nền tảng (được thêm vào React Native 0.74, có sẵn trên New Architecture) sử dụng cú pháp chuỗi giống hệt box-shadow của CSS và hoạt động giống hệt nhau trên cả iOS lẫn Android. Nếu phiên bản React Native và kiến trúc ứng dụng của bạn hỗ trợ, bạn có thể chỉ dùng một thuộc tính này thay vì bốn thuộc tính iOS riêng biệt cộng với elevation — hãy kiểm tra phiên bản RN và trạng thái New Architecture trước khi phụ thuộc vào nó trong môi trường production.
Tại sao shadowRadius bằng một nửa giá trị độ mờ tôi đặt?
Bản xem trước trực tiếp sử dụng box-shadow của CSS, nơi giá trị độ mờ lan rộng gấp khoảng hai lần so với shadowRadius của iOS với cùng một con số. Mã được tạo ra đặt shadowRadius bằng một nửa giá trị độ mờ của bạn để bóng đổ bạn thấy trong bản xem trước khớp với những gì iOS thực sự render — nếu bạn sao chép trực tiếp giá trị độ mờ, bóng đổ trên iOS sẽ trông mềm hơn và lớn hơn đáng kể so với bản xem trước.
Tôi có cần Platform.select để áp dụng các style này không?
Không — việc đặt các thuộc tính shadow* của iOS và elevation của Android cùng nhau trong một style object là an toàn, đúng như mã được tạo ra làm: mỗi nền tảng đơn giản là bỏ qua các thuộc tính của nền tảng kia. Platform.select chỉ đáng thêm vào nếu bạn muốn thiết kế bóng đổ thực sự khác nhau cho từng nền tảng, chứ không chỉ để tránh cảnh báo (vì không có cảnh báo nào cả).
Tôi đã đặt elevation nhưng bóng đổ trên Android vẫn không xuất hiện — tại sao?
Hai nguyên nhân phổ biến nhất: view không có backgroundColor (bóng đổ elevation của Android được đổ từ nền không trong suốt của view, nên một view trong suốt sẽ không đổ bóng gì cả), hoặc một parent có overflow: 'hidden' và đang cắt mất bóng đổ. Hãy cho view một màu nền đặc và kiểm tra cài đặt overflow của các phần tử cha trước khi cho rằng giá trị elevation bị sai.