CapDrive
Kullanım kılavuzu

Image

Logo, dekoratif arka plan veya döşeme dokusu gibi bir gösterge kaynağından bir görüntü görüntüler. source Ölçekleme, kırpma veya yineleme yöntemini mevcut boyutlara ayarlamak için kaynak adını kullanın.

Örnek

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

Kullanım

  • source paket içi resim adıdır. original renkleri korur, template color kullanır. repeatMode resmi döşer, çocukları değil. Normal ölçekleme contentMode ile yapılır.
  • Sayısal ölçüler noktadır. auto içeriği ölçer, fill ebeveynin ayırdığı alanı kullanır. Önce kapsayıcıyı boyutlandırın; fill veya uzun metin sabit ebeveyni genişletmez.

Özellikler

sourcestring

Göstergenin kaynaklarındaki resim dosyası adı; SF Symbols adı değildir.

Örnek""
contentMode?"fit" | "fill" | "stretch"

fit tamamını gösterir; fill doldurup kırpar; stretch oranı değiştirir.

Örnek"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

Doğal boyutta döşeme: repeat iki eksen, repeatX/repeatY tek eksen, none tekrarsız.

Örnek"none"
renderingMode?"original" | "template"

original resim rengini korur; template color ile renklendirir.

Örnek"original"
color?Paint

HDR renkleri dahil çizim rengi.

ÖrnekHDR($env.foreground)
contentAnimation?ContentAnimation

İçerik değişimi geçişi. Desteklenen type seçilir; duration/delay saniyedir.

Örnek{type: "fade", duration: 0.25}
Ortak özellikler
width?number | "auto" | "fill"

Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.

Örnek100
height?number | "auto" | "fill"

Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.

Örnek80
padding?number

Punto cinsinden içerik iç boşluğu.

Örnek0
x?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
y?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
transform?ViewTransform

Yerleşimi değiştirmeyen bütünsel dönüşüm. Kaydırma punto, dönüş/eğim derece, ölçek 1 değişmez, dayanak 0–1.

Örnek{rotation: 0}
background?Paint

Arka plan rengi veya gradyanı; clear saydamdır.

Örnek"clear"
opacity?number

Tüm View opaklığı: 0 saydam, 1 opak.

Örnek1
cornerRadius?number

Köşe yarıçapı, punto.

Örnek0
clipped?boolean

View sınırlarını aşan çizimi kırpar.

Örnekfalse
clip?"rectangle" | "ellipse"

Kırpma şekli rectangle veya ellipse; Material için false kapatır.

Örnek"rectangle"
mask?View | null

Alfa maskesi View öğesi. Düzeni etkilemeden ortalanır; null maskeyi devre dışı bırakır.

Örnek<Circle width="fill" height="fill" background="white"/>
zIndex?number

Kardeşler arasında çizim sırası; büyük değer öndedir.

Örnek0
blur?number

Bulanıklık yarıçapı, punto; 0 kapatır.

Örnek4
innerShadow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Dış gölge rengi.

ÖrnekHDR("black")
shadowOpacity?number

Gölge opaklığı 0–1; 0 gizler.

Örnek0
shadowRadius?number

Dış gölge bulanıklık yarıçapı, punto.

Örnek4
shadowX?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek0
shadowY?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek2
animations?Animation[]

Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.

Örnek[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Kardeş öğeler arasında kararlı kimlik.

Pratik örnek

function main() {
  return (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

Animasyon

Animasyon

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

Atlandığında

Tablo uygulamada doğrulanmış atlama davranışıdır; örnekler varsayılan değildir. Sabit sonuç için açık değer kullanın; bağlama bağlı boyut ve tema renkleri sabit sayı değildir.

ÖzelliklerAtlandığında
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

Önceki

Group

Sonraki adım

Bu sayfada

ÖrnekKullanımÖzelliklerPratik örnekAnimasyonAtlandığındaİlgili API’ler