Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Pengembang · utilitas Lokal

Generator Bayangan React Native

React Native Shadow Generator

Setel bayangan iOS dan elevation Android sambil membandingkan pratinjau langsung, lalu salin cuplikan StyleSheet TypeScript, termasuk mode boxShadow baru.

Jalur tugas / dari masukan ke hasil

Pilih platform target

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Bayangan React Native, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara membuat bayangan React Native

  1. 01

    Pilih platform target

    Pilih API keluaran terlebih dahulu: mode Lama menghasilkan properti bayangan iOS atau elevation Android sesuai platform, sedangkan boxShadow menghasilkan satu bayangan luar untuk Android 9+ yang mendukung React Native New Architecture. Dalam mode Lama, pilih platform iOS, Android, atau Keduanya; Keduanya adalah default.

  2. 02

    Bentuk bayangan iOS

    Pilih Warna bayangan, lalu atur Pergeseran X dan Pergeseran Y dari -100 hingga 100 px, Opasitas dari 0 hingga 1 dengan langkah 0.01, dan Radius dari 0 hingga 100 px. Nilai di luar rentang secara otomatis dikunci ke batasnya, jadi Anda bebas mengetik tanpa menghasilkan kode rusak.

  3. 03

    Atur Elevation Android

    Sesuaikan Elevation dari 0 hingga 24. Bayangan Android berasal dari elevation, bukan pergeseran, jadi nilai ini menggerakkan bagian Android dari keluaran sementara angka iOS membiarkannya utuh. Dalam mode Keduanya, kontrol iOS tetap aktif, sehingga kedua bagian cuplikan bisa disetel berdampingan.

  4. 04

    Periksa pratinjau langsung

    Kartu Pratinjau langsung merender aproksimasi box-shadow peramban untuk platform yang dipilih, diperbarui pada setiap perubahan. Muat contoh memasukkan contoh nila yang lebih terangkat jika Anda ingin titik awal yang lebih kuat daripada default yang halus.

  5. 05

    Salin kode yang dihasilkan

    Gunakan Salin kode atau Unduh .ts untuk membawa cuplikan StyleSheet —disimpan sebagai toolars-react-native-shadow.ts— ke proyek Anda. Setel ulang mengembalikan bayangan default saat Anda ingin memulai dari awal.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Bayangan React Native menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Kapan Generator Bayangan React Native berguna

Gaya lintas platform

Buat properti iOS dan Android yang menjadi bagian dari gaya komponen yang sama.

Serah terima desain

Ubah keputusan bayangan visual menjadi kode React Native siap salin.

Penyetelan cepat

Sesuaikan kedalaman, warna, opasitas, radius, dan offset terhadap aproksimasi langsung.

Apa yang sebenarnya dilakukan Generator Bayangan React Native

File desain menunjukkan kartu yang mengambang dengan pas, dan sekarang ia harus diwujudkan dua kali: sekali sebagai properti bayangan iOS dan sekali sebagai elevation Android. Generator Bayangan React Native memungkinkan Anda menyetel tampilan terhadap aproksimasi langsung dan menyalin blok StyleSheet yang persis, alih-alih menebak angka dan mengompilasi ulang aplikasi untuk setiap tebakan. Mode Lama Keduanya menggabungkan properti bayangan iOS dan elevation Android dalam satu cuplikan; periksa warna dan tampilan akhir pada setiap perangkat.

Pertanyaan umum

Kode apa yang dihasilkan generator?
Cuplikan TypeScript yang mengimpor StyleSheet dari react-native dan mengekspor objek styles dengan satu aturan card. Untuk iOS ia mengeluarkan shadowColor, shadowOffset dengan width dan height, shadowOpacity, dan shadowRadius; untuk Android ia mengeluarkan elevation (plus shadowColor dalam mode khusus Android); Keduanya menyertakan properti iOS dan elevation sekaligus.
Apa nilai defaultnya?
Bayangan default menarget Keduanya platform dengan warna #111827, Pergeseran X di 0, Pergeseran Y di 8 px, Opasitas di 0.24, Radius di 16 px, dan Elevation di 8 — juga persis yang Anda lihat saat ruang kerja pertama dibuka. Setel ulang mengembalikan nilai-nilai ini, dan Muat contoh menggantinya dengan preset nila yang lebih kuat pada pergeseran dan radius yang lebih besar.
Format warna apa yang diterima?
Nilai heksadesimal enam digit seperti #111827. Apa pun yang bukan warna heksa valid kembali ke default alih-alih merusak keluaran, dan nilai valid dinormalisasi menjadi huruf besar dalam kode yang dihasilkan.
Apakah pratinjau persis seperti yang akan ditampilkan perangkat?
Tidak, dan kartu pratinjau menyatakannya: peramban menggambar aproksimasi box-shadow dari platform yang dipilih, yang cukup untuk membandingkan pengaturan tetapi bukan kecocokan piksel demi piksel. Dalam mode iOS dan Keduanya ia mencerminkan pergeseran, radius, warna, dan opasitas Anda; dalam mode Android ia memalsukan keterangkatan elevation, karena peramban tidak mengenal konsep itu. Selalu konfirmasi tampilan akhir di perangkat nyata atau emulator.
Rentang nilai apa yang diterima?
Pergeseran X dan Pergeseran Y berjalan dari -100 hingga 100 px, Opasitas dari 0 hingga 1 dengan langkah 0.01, Radius dari 0 hingga 100 px, dan Elevation dari 0 hingga 24. Masukan di luar rentang dikunci ke nilai valid terdekat alih-alih menghasilkan kode rusak.
Apakah pengaturan saya diunggah atau disimpan?
Tidak. Kode dihasilkan secara lokal di tab ini, tidak ada pengaturan bayangan yang disimpan atau dikirim ke mana pun, dan tidak perlu akun.
Kapan memilih mode boxShadow baru?
Saat aplikasi memakai New Architecture React Native dan menargetkan Android 9 atau lebih baru. Mode ini mengekspor satu bayangan luar tanpa elevation. Gunakan properti lama untuk lingkungan sebelumnya. Radius blur dan radius bayangan lama tidak selalu menghasilkan piksel yang sama; periksa pada aplikasi native.

Lanjutkan di Pengembang

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Kode ke Gambar

Code to Image Converter

Ekspor kode JavaScript, TypeScript, HTML, CSS, JSON, atau Bash berwarna sintaks sebagai SVG atau PNG dengan tema, nomor baris, dan judul jendela pilihan.

Buat

Generator Slug URL

URL Slug Generator

Ubah judul menjadi slug URL huruf kecil: aksen dihilangkan, & menjadi and, pemisah tanda hubung atau garis bawah; aksara non-Latin tetap utuh.

Buat

Enkode/Dekode Base64

Base64 Encoder/Decoder

Enkode atau dekode Base64 dengan opsi UTF-8, URL-safe, dan baris baru, divalidasi langsung di peramban — tombol Tukar memudahkan pemeriksaan pulang-pergi.

Konversi

Enkode/Dekode HTML

HTML Encoder/Decoder

Escape lima karakter perusak markup menjadi entitas HTML, atau urai referensi bernama dan numerik kembali lewat parser peramban, semuanya secara lokal.

Konversi