Bỏ qua tới nội dung
Toolars
Khám phá
Báo lỗi

Tiện ích Lập trình · Cục bộ

Đổ bóng cho React Native

React Native Shadow Generator

Tinh chỉnh shadow iOS và elevation Android đối chiếu xem trước trực tiếp, rồi sao chép đoạn StyleSheet cho iOS, Android hoặc cả hai, kể cả chế độ boxShadow mới.

Lộ trình tác vụ / từ đầu vào đến kết quả

Chọn nền tảng đích

Chạy cục bộ · Không có gì được tải lên

Cách Đổ bóng cho React Native hoạt động, quyền riêng tư và các công cụ liên quan

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách tạo một shadow React Native

  1. 01

    Chọn nền tảng đích

    Chọn API đầu ra trước: chế độ cũ tạo thuộc tính bóng iOS hoặc elevation Android theo nền tảng, còn boxShadow tạo một bóng đổ ngoài cho Android 9+ hỗ trợ React Native New Architecture. Trong chế độ cũ, chọn iOS, Android hoặc Cả hai; mặc định là Cả hai.

  2. 02

    Tạo dáng shadow iOS

    Chọn một Màu shadow, rồi đặt Offset X và Offset Y từ -100 đến 100 px, Opacity từ 0 đến 1 theo bước 0.01, và Radius từ 0 đến 100 px. Giá trị ngoài dải được tự động kẹp về dải, nên bạn có thể gõ tự do mà không tạo ra mã hỏng.

  3. 03

    Đặt elevation Android

    Điều chỉnh Elevation từ 0 đến 24. Shadow trên Android đến từ elevation chứ không phải offset, nên giá trị này điều khiển nửa Android của đầu ra trong khi các con số iOS để yên nó. Ở chế độ Cả hai, các điều khiển iOS vẫn hoạt động, nên hai nửa của đoạn mã có thể tinh chỉnh cạnh nhau.

  4. 04

    Kiểm tra bản xem trước trực tiếp

    Thẻ Xem trước trực tiếp render một xấp xỉ box-shadow của trình duyệt cho nền tảng đã chọn, cập nhật theo mọi thay đổi. Tải mẫu thả vào một ví dụ chàm nổi bật nếu bạn muốn điểm khởi đầu mạnh hơn mặc định tinh tế.

  5. 05

    Sao chép mã được tạo

    Dùng Sao chép mã hoặc Tải xuống .ts để đưa đoạn StyleSheet — lưu thành toolars-react-native-shadow.ts — vào dự án của bạn. Đặt lại khôi phục shadow mặc định khi bạn muốn bắt đầu lại.

Thông tin công cụ

Xử lý
Trong trình duyệt của bạn
Dữ liệu nhập rời thiết bị này
Không bao giờ
Lưu giữ
Không có gì được lưu
Giá
Miễn phí

Dữ liệu bạn nhập ở lại trong trình duyệt.

Đổ bóng cho React Native dùng lộ trình thực thi cục bộ đã xác minh và không tạo lịch sử đầu vào hay đầu ra ẩn.

Thực thi cục bộ

Chạy bên trong tab trình duyệt hiện tại.

Không xử lý ẩn

Dữ liệu công cụ đang hoạt động không bao giờ trở thành bản ghi tài liệu của Toolars.

Không cần tài khoản

Dùng quy trình cốt lõi mà không cần tạo hồ sơ. Mục yêu thích đồng bộ vào tài khoản sau khi bạn đăng nhập.

Đặt lại ngay lập tức

Xóa tab và dữ liệu đang làm việc sẽ biến mất.

Khi nào Đổ bóng cho React Native hữu ích

Kiểu đa nền tảng

Tạo các thuộc tính iOS và Android thuộc về cùng một kiểu component.

Bàn giao thiết kế

Biến quyết định đổ bóng trực quan thành mã React Native sẵn sàng sao chép.

Tinh chỉnh nhanh

Điều chỉnh độ sâu, màu, độ mờ, bán kính và offset trên một bản mô phỏng trực tiếp.

Đổ bóng cho React Native thực sự làm gì

File thiết kế cho thấy một thẻ lơ lửng vừa vặn, và giờ nó phải tồn tại hai lần: một lần dưới dạng thuộc tính shadow iOS và một lần dưới dạng elevation Android. Trình tạo shadow React Native cho phép bạn điều chỉnh ngoại hình đối chiếu với một xấp xỉ trực tiếp và sao chép chính xác khối StyleSheet, thay vì chỉnh số thủ công và biên dịch lại ứng dụng cho mỗi lần đoán. Chế độ cũ Cả hai kết hợp thuộc tính bóng iOS với elevation Android trong cùng đoạn mã; hãy kiểm tra màu và hình thức cuối trên từng thiết bị.

Câu hỏi thường gặp

Trình tạo tạo ra mã gì?
Một đoạn TypeScript import StyleSheet từ react-native và export một đối tượng styles với một quy tắc card duy nhất. Cho iOS nó sinh shadowColor, shadowOffset với width và height, shadowOpacity và shadowRadius; cho Android nó sinh elevation (cộng shadowColor ở chế độ chỉ Android); Cả hai gồm các thuộc tính iOS và elevation cùng nhau.
Các giá trị mặc định là gì?
Shadow mặc định nhắm Cả hai nền tảng với màu #111827, Offset X ở 0, Offset Y ở 8 px, Opacity ở 0.24, Radius ở 16 px, và Elevation ở 8 — cũng chính xác là thứ bạn thấy khi không gian làm việc mở lần đầu. Đặt lại quay về các giá trị này, và Tải mẫu thay bằng một thiết lập chàm mạnh hơn ở offset và radius cao hơn.
Những định dạng màu nào được chấp nhận?
Một giá trị hex sáu chữ số như #111827. Bất cứ thứ gì không phải màu hex hợp lệ sẽ quay về mặc định thay vì phá hỏng đầu ra, và các giá trị hợp lệ được chuẩn hóa thành chữ hoa trong mã được tạo.
Bản xem trước có đúng y hệt thứ thiết bị sẽ hiển thị không?
Không, và thẻ xem trước nói rõ điều đó: trình duyệt render một xấp xỉ box-shadow của nền tảng đã chọn, đủ để so sánh các cài đặt nhưng không khớp từng pixel. Ở chế độ iOS và Cả hai, nó phản chiếu offset, radius, màu và độ mờ của bạn; ở chế độ Android, nó giả lập độ nâng của elevation, vì trình duyệt không có khái niệm elevation. Luôn xác nhận ngoại hình cuối cùng trên thiết bị thật hoặc trình giả lập.
Những dải giá trị nào được chấp nhận?
Offset X và Offset Y chạy từ -100 đến 100 px, Opacity từ 0 đến 1 theo bước 0.01, Radius từ 0 đến 100 px, và Elevation từ 0 đến 24. Các giá trị nhập ngoài dải được kẹp về giá trị hợp lệ gần nhất thay vì tạo ra mã hỏng.
Cài đặt của tôi có bị tải lên hay lưu lại không?
Không. Mã được tạo cục bộ trong tab này, không cài đặt shadow nào được lưu hay gửi đi đâu, và không cần tài khoản.
Khi nào tôi nên chọn chế độ boxShadow mới?
Dùng nó khi ứng dụng của bạn chạy React Native New Architecture và mục tiêu Android của bạn từ 9 trở lên. Chế độ này xuất một shadow outset duy nhất không có elevation. Với thiết lập cũ hơn, giữ các thuộc tính nền tảng legacy. Blur radius và shadow radius legacy không phải phép chuyển khớp từng pixel; hãy kiểm tra style được tạo trong ứng dụng native của bạn.

Tiếp tục trong Lập trình

Tác vụ liên quan, không phải ngõ cụt.

Chuyển sang một không gian làm việc tập trung khác mà không cần quay lại mục lục đầy đủ.

Chuyển code thành ảnh

Code to Image Converter

Xuất mã tô sáng bằng Shiki — sáu ngôn ngữ, giao diện sáng/tối kiểu GitHub — thành PNG hoặc SVG với số dòng, tiêu đề cửa sổ và tỷ lệ 1x/2x. Xử lý cục bộ.

Tạo

Trình tạo slug URL

URL Slug Generator

Chuẩn hóa tiêu đề thành slug viết thường: bỏ dấu phụ, & thành and, ký tự lạ gộp thành một dấu gạch ngang hoặc gạch dưới. Giữ chữ cái mọi hệ chữ.

Tạo

Mã hóa/giải mã Base64

Base64 Encoder/Decoder

Mã hóa và giải mã Base64 với thẩm định trực tiếp, tùy chọn UTF-8, an toàn URL và giữ ngắt dòng. Nút Đảo giúp kiểm tra khứ hồi trong hai cú nhấp.

Chuyển đổi

Mã hóa/giải mã HTML

HTML Encoder/Decoder

Escape đúng năm ký tự phá markup — &, <, >, ngoặc kép và nháy đơn — hoặc giải mã mọi entity tên và số qua trình phân tích của trình duyệt. Chạy cục bộ.

Chuyển đổi