React Native Gölge Oluşturucu

React Native'de gölgeler platforma göre farklı çalışır: iOS shadowColor, shadowOffset, shadowOpacity ve shadowRadius değerlerini okurken Android bunların tümünü yok sayar ve bunun yerine ayrı bir elevation sayısına ihtiyaç duyar. Gölgeyi burada görsel olarak ayarlayın ve her iki platformu da kapsayan bir stil nesnesini, New Architecture kullanan uygulamalar için daha yeni, platformlar arası boxShadow dizesiyle birlikte kopyalayın.

Bu Araç Nedir?

React Native'de gölgeler varsayılan olarak platformlar arası değildir. iOS, web'in box-shadow özelliğinin kullandığı aynı temel CoreAnimation gölgesine karşılık gelen dört ayrı stil özelliği kullanır (shadowColor, width/height içeren shadowOffset, 0-1 arası shadowOpacity ve bulanıklık için shadowRadius). Android'in yerel View sistemi rastgele gölge şekillerini hiç desteklemez — yalnızca elevation'ı destekler; bu, görünümün ne kadar "yüksekte" yüzüyor gibi göründüğüne bağlı olarak sabit bir Material Design gölgesi üreten tek bir sayıdır.

Bu, shadowRadius/shadowOpacity kullanılarak iOS'ta doğru görünen bir gölgenin, elevation da ayarlanmadığı sürece Android'de hiç görünmeyeceği anlamına gelir ve elevation'ın gölge şekli iOS'unki gibi özelleştirilemediğinden ikisi asla piksel piksel aynı görünmeyecektir. New Architecture etkinleştirilmiş React Native 0.74 itibarıyla, CSS ile aynı sözdizimini kullanan platformlar arası bir boxShadow stil özelliği de kullanılabilir.

Neden Kullanmalısınız?

Offset, bulanıklık, opaklık ve rengi ayarlarken canlı bir görsel önizleme görün — değerleri tahmin edip kontrol etmek için uygulamanızı yeniden derlemek yerine.
iOS gölge özelliklerini, Android elevation'ını ve daha yeni platformlar arası boxShadow dizesini tek seferde alın; böylece üç farklı API'ye bakmanıza gerek kalmaz.
Elevation ayrı bir kontrol öğesidir (bulanıklık/opaklıktan otomatik hesaplanmaz) çünkü Android'in elevation-gölge görünümü eşlemesi iOS'un gölge özelliklerinden doğrudan bir çeviri değildir — görsel olarak eşleşecek şekilde ayarlamanız gerekir; bu araç bunu yan yana yapmanızı sağlar.
Ücretsiz, anında ve tek bir stil nesnesi olarak kopyaya hazır.

Nasıl Kullanılır

Offset X/Y, bulanıklık yarıçapı, opaklık ve gölge rengini ayarlayın — önizleme kutusu canlı olarak güncellenir.
Android elevation sayısını, hedeflediğiniz gölge gücüyle görsel olarak eşleşene kadar ayrıca ayarlayın.
iOS özelliklerini, Android elevation'ını ve boxShadow dizesini içeren tam stil nesnesini kopyalamak için "Kopyala"ya tıklayın.
Nesneyi bileşeninizin StyleSheet'ine yapıştırın — mevcut görünüm stillerinizle birleştirin veya yayın (spread).

Örnek

Giriş

Offset (0, 4), bulanıklık 8, opaklık 0.25, siyah, elevation 5

Çıkış

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, önizlemede gösterilen bulanıklık değerinin yarısına ayarlanır; bu, CSS bulanıklık yarıçapının pratikte iOS'un shadowRadius'una nasıl karşılık geldiğiyle uyumludur.

Sıkça Sorulan Sorular

Gölgem Android'de neden görünmüyor?

shadowColor/shadowOffset/shadowOpacity/shadowRadius özellikleri yalnızca iOS içindir — Android'in yerel işlemesi bunları basitçe yok sayar. Android'de bir gölgenin görünmesi için elevation özelliğini de (pozitif bir sayı) ayarlamanız gerekir.

Android gölgesini iOS'takiyle aynı görünecek şekilde yapabilir miyim?

Tam olarak değil — elevation, Android'in yerleşik Material Design gölge şeklini üretir ve bu şekil, iOS'un gölgesinde olduğu gibi renk, offset yönü veya bulanıklık için bağımsız olarak yapılandırılamaz. Görsel olarak benzer bir güç elde etmek için elevation sayısını ayarlayabilirsiniz, ancak klasik shadow/elevation API'leriyle platformlar arasında piksel piksel eşleşme mümkün değildir.

boxShadow özelliği nedir ve onu bunun yerine kullanabilir miyim?

boxShadow, gerçek anlamda platformlar arası daha yeni bir stil özelliğidir (React Native 0.74'te eklenmiştir, New Architecture'da kullanılabilir) ve CSS box-shadow ile aynı dize sözdizimini kullanır, iOS ve Android'de tamamen aynı şekilde çalışır. Uygulamanızın React Native sürümü ve mimarisi destekliyorsa, dört ayrı iOS özelliği artı elevation yerine yalnızca bu tek özelliği kullanabilirsiniz — üretimde buna güvenmeden önce RN sürümünüzü ve New Architecture durumunuzu kontrol edin.

shadowRadius neden ayarladığım bulanıklık değerinin yarısı?

Canlı önizleme, bulanıklık değerinin aynı sayı için iOS'un shadowRadius'undan yaklaşık iki kat daha fazla yayıldığı CSS box-shadow'unu kullanır. Üretilen kod, shadowRadius'u bulanıklık değerinizin yarısına ayarlar; böylece önizlemede gördüğünüz gölge iOS'un fiilen render ettiğiyle eşleşir — bulanıklık değerini doğrudan kopyalasaydınız, iOS gölgesi önizlemeye göre belirgin şekilde daha yumuşak ve büyük görünürdü.

Bu stilleri uygulamak için Platform.select'e ihtiyacım var mı?

Hayır — üretilen kodun yaptığı gibi iOS'un shadow* özelliklerini ve Android'in elevation'ını tek bir stil nesnesinde bir arada bulundurmak güvenlidir: her platform diğerinin özelliklerini basitçe yok sayar. Platform.select'i yalnızca platform başına gerçekten farklı gölge tasarımları istiyorsanız eklemeye değer, uyarılardan kaçınmak için değil (zaten hiç uyarı yok).

Elevation ayarladım ama Android gölgesi hâlâ görünmüyor — neden?

En yaygın iki neden: görünümün backgroundColor'ı yok (Android'in elevation gölgesi görünümün opak arka planından yansıtılır, bu yüzden şeffaf bir görünüm hiçbir gölge yansıtmaz) veya bir üst öğede overflow: 'hidden' var ve gölgeyi kırpıyor. Elevation değerinin yanlış olduğunu varsaymadan önce görünüme düz bir arka plan rengi verin ve üst öğelerin overflow ayarlarını kontrol edin.