e
sv

Zephyr ile Tanışın: React Native için Tailwind CSS

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Sade CSS ile karmaşık web uygulamaları oluşturmak göz korkutucu bir zorluk olabilir. Sonuç olarak, geliştiriciler, geliştirme döngülerini iyileştirmek için Bootstrap ve Tailwind CSS gibi popüler stil kitaplıklarına gitme eğilimindedir.

Web'de stil oluşturmaya benzer şekilde, React Native'de yerleşik stil işlevlerini kullanmak yavaş ve zahmetli bir süreç olabilir. React Native için Bootstrap ve Tailwind CSS'ye benzer çözümler mevcuttur ve bu çözümlerden biri React Native Zephyr'dir. React Native Zephyr, geliştirme hızınızı artırmak ve React Native uygulamalarını daha hızlı göndermek için tasarlanmış Tailwind CSS'den ilham alan bir stil kitaplığıdır.

Ayrıca Tailwind CSS deneyimini React Native'e getiriyor. Tailwind CSS'ye aşina iseniz, ikisi arasındaki benzerlikler nedeniyle Zephyr'i kolayca alabilirsiniz. Bu makale size React Native Zephyr'in ana özelliklerini tanıtacaktır.

React Native Zephyr nedir?

React Native Zephyr, Tailwind CSS'den ilham alan bir React Native stil kitaplığıdır. Tailwind CSS'nin bazı temel fikirlerini, herhangi bir yerel bağımlılık olmadan React Native bağlamında uygular.

Bu makalenin yazıldığı sırada hala aktif geliştirme aşamasında olmasına rağmen, aşağıdakiler React Native Zephyr'in temel özelliklerinden bazılarıdır.

  • Kutudan çıkar çıkmaz kullanışlı bir dizi yerleşik şekillendirme aracı sağlar
  • Genişletilebilir bir varsayılan tema ile birlikte gelir
  • Kutunun dışında karanlık mod desteği var

Yukarıdaki özellikler, React Native Zephyr'i diğer kitaplıklarda bulunan yerleşik stil işlevselliğine daha iyi bir alternatif haline getirir. Yukarıdaki özellikler hiçbir şekilde ayrıntılı değildir ve React Native Zephyr'in daha yerleşik özellikleri için resmi belgelere göz atmanızı tavsiye ederim.

React Native, web ile doğrudan uyumlu olmayan stil işlevlerine sahiptir. Bu nedenle Bootstrap ve Tailwind CSS gibi web odaklı stil çözümlerinizi doğrudan React Native'e aktarmak zor olabilir. Ancak, Tailwind CSS beceri setlerinizden bazıları, iki kitaplık arasındaki benzerlikler nedeniyle React Native Zephyr'e aktarılabilir.

Mevcut bir React Native projeniz varsa, React Native Zephyr'i npm paketi kayıt defterinden şu şekilde yükleyebilirsiniz:

 # npm'yi kullanma
npm i tepki-yerli-zephyr

# İplik kullanma
iplik reaksiyon-yerli-zephyr ekleyin

# pnpm'yi kullanma
pnpm tepki-yerel-zephyr ekleyin

React Native Zephyr nasıl kullanılır?

React Native Zephyr, diğer şeylerin yanı sıra uygulamanızın renk şemasını yönetmek için başlık altındaki StyleProvider bileşenini kullanır. react-native-zephyr kullanmaya başlamak için StyleProvider bileşenini içe aktarın ve uygulamanızı buna sarın.

 "react-native-zephyr"den { StyleProvider } içe aktarın;
dışa aktarma const Uygulaması = () => (
  <Stil Sağlayıcı>
    { /* Uygulamanızın geri kalanı buraya gelir */}
  </StyleProvider>
);

React Native Zephyr, temel stil yardımcı programları oluşturmak için createStyleBuilder işlevini dışa aktarır. createStyleBuilder çağrılması, styles , useStyles ve makeStyledComponent yardımcı program işlevlerini döndürür. Bu şekillendirme yardımcı işlevleri, React Native Zephyr'in farklı şekillendirme yaklaşımlarını sağlar.

Kolay bakım için React Native Zephyr, stil yardımcı programlarınızı yönetmek için özel bir yardımcı program dosyası oluşturmanızı önerir. Aşağıdaki kod, React Native Zephyr'in temel şekillendirme yardımcı programını gösterir.

 "react-native-zephyr"den { createStyleBuilder } içe aktarın;
dışa aktarma const { stiller, useStyles, makeStyledComponent } = createStyleBuilder();

createStyleBuilder işlevi, varsayılan temayı geçersiz kılmak veya genişletmek için kullanabileceğiniz yukarıdaki örnekte geçmemiş olsak da, isteğe bağlı bir argüman alır. Bizim yaptığımız gibi createStyleBuilder bir argüman olmadan çağırırsanız, React Native Zephyr varsayılan temayı kullanır. Önümüzdeki bölümlerde varsayılan temayı geçersiz kılmayı ve genişletmeyi öğreneceğiz.

İhtiyacınız olanı bu yardımcı program dosyasından uygulamanızın diğer bileşenlerine aktarabilirsiniz. Yukarıdaki örneğin gösterdiği gibi, temel stil yardımcı programları, styles ve makeStyledComponent işlevleri ve useStyles .

React Native Zephyr'de şekillendirme yöntemleri nasıl kullanılır?

Önceki bölümde belirtildiği gibi, React Native Zephyr, yardımcı program işlevlerini yönetmek için özel bir styles.js yardımcı programı dosyası oluşturmayı önerir. createStyleBuilder işlevinin çağrılması, styles ve makeStyledComponent işlevlerini ve useStyles kancasını döndürür. Bu yardımcı program işlevlerini styles.js dosyasından uygulamanızda bunlara ihtiyaç duyan bileşenlere aktarabilirsiniz.

 "react-native-zephyr"den { createStyleBuilder } içe aktarın;
dışa aktarma const { stiller, useStyles, makeStyledComponent } = createStyleBuilder();

styles işlevi, bir dizi React Native Zephyr sınıf adı alır ve bir React Native stilleri nesnesi döndürür. Argüman olarak ilettiğiniz sınıf adları, temanız ve işleyicilerinizdendir. styles işlevini şu şekilde kullanabilirsiniz:

 varsayılan işlevi dışa aktar App() {
  dönüş (
    <View style={styles("flex:1", "bg:black")} >
      <Metin stili={styles("renk:beyaz", "metin:5xl")}>
        Selam Dünya
      </Metin>
    </Görüntüle>
  );
}

styles işlevinin karanlık mod için hazır desteği olmadığını unutmayın. Bu nedenle, yalnızca tek seferlik bir stil için uygundur.

React Native makeStyledComponent sarmalayıcısını kullanarak da stil oluşturabilirsiniz. Adından da anlaşılacağı gibi makeStyledComponent , stilli Bileşenler oluşturmak için bir yardımcı program işlevidir. makeStyledComponent yardımcı program işlevi, bir Bileşeni argüman olarak alır ve Bileşene class ve darkClass destekleri ekler. Stil sınıflarını geçebileceğiniz sarılmış Bileşeni döndürür.

Yukarıda önerildiği gibi, styles.js dosyanızda stilli bileşenler oluşturmak ve bunları şu şekilde dışa aktarmak en iyisidir:

 dışa aktarma const StyledText = makeStyledComponent(Text);
dışa aktarma const StyledView = makeStyledComponent(View);

useStyles kancası, dahili olarak styles yöntemini kullanır. styles yönteminden farklı olarak, useStyles kancası karanlık modu destekler. Diğer tüm React kancaları gibi, useStyles kancasını yalnızca işlevsel bileşenlerle ve başka bir kancayla kullanabilirsiniz – bir React Native öğesine iletebileceğiniz bir stil nesnesi döndürür.

Aşağıdaki kod, useStyles kancasını nasıl kullanabileceğinizi gösterir.

 varsayılan işlevi dışa aktar App() {
  const sarmalayıcıStyles = useStyles({
    sınıflar: ["flex:1", "bg:black"],
  });
  const textStyles = useStyles({
    sınıflar: ["renk:beyaz", "metin:5xl"],
  });
  dönüş (
    <Görünüm stili={wrapperStyles}>
      <Text style={textStyles}>Merhaba Dünya</Text>
      <StatusBar style="otomatik" />
    </Görüntüle>
  );
}

React Native Zephyr'deki varsayılan tema

React Native Zephyr, yapılandırma olmadan kullanabileceğiniz varsayılan bir temaya sahiptir – bunu en başından beri kullanıyoruz. Varsayılan tema, ilhamını Tailwind CSS'deki varsayılan temadan alır; ihtiyaçlarınızı karşılamıyorsa varsayılan temayı da genişletebilirsiniz.

Varsayılan tema, çeşitli stil kısıtlamaları ile birlikte gelir; hangi React Native Zephyr stil sınıfları oluşturmak için kullanır.

Aşağıdaki örnekte olduğu gibi bir öğeye pl:56 stilini uyguladığınızda, React Native Zephyr 224 piksellik sol dolgu 224px . pl:56 stil sınıfında pl , paddingLeft özelliğidir ve 56 , React Native Zephyr stili bir React Native stil nesnesine dönüştürdüğünde boyutu 224px olan varsayılan bir tema aralığı kısıtlamasıdır. Belgeler, varsayılan tema kısıtlamalarının ve bunlara karşılık gelen ölçeklerin tam bir listesini içerir.

 <StyledText sınıfları={["pl:56"]}>Merhaba Dünya</StyledText>

React Native Zephyr, kenar boşluğu, dolgu ve boyutlandırma stili sınıfları oluşturmak için spacing kısıtlamalarını kullanır. Varsayılan tema, opacities ve letterSpacing kısıtlamaları gibi birkaç başka kısıtlama içerir.

React Native Zephyr'deki varsayılan temayı genişletin ve geçersiz kılın

Varsayılan bir tema ile birlikte gelmesine rağmen, React Native Zephyr, onu genişletmenize ve geçersiz kılmanıza izin verir. Önceki bölümlerden birinde tanıtılan createStyleBuilder işlevi, bağımsız değişken olarak isteğe bağlı bir nesne alır. Nesne, sırasıyla varsayılan temayı geçersiz kılmak ve genişletmek için overrideTheme ve extendTheme özelliklerine sahiptir. Her iki özelliğin de değeri nesneler veya işlevler olabilir.

overrideTheme özelliğinin değerini aşağıdaki örnekteki gibi bir nesneye ayarlarsanız, React Native Zephyr varsayılan temadaki renkleri geçersiz kılar. dark , light ve brandColorPalette renkleri aşağıdaki örnekte varsayılan renkleri geçersiz kılar.

 dışa aktarma const { makeStyledComponent, stiller, useStyles } = createStyleBuilder({
 overrideTheme: {
  renkler: {
    karanlık: "#737373",
    ışık: "#e5e5e5",
    brandColorPalette: "#a1323e",
  }
 }
});

overrideTheme özelliğinin değerini aşağıdaki kodda olduğu gibi tema kısıtlamaları nesnesini döndüren bir fonksiyona ayarlayabilirsiniz. overrideTheme özelliğinin değerini bir fonksiyona ayarladığınızda, temel yazı tipi boyutuna erişebileceksiniz.

 dışa aktarma const { makeStyledComponent, stiller, useStyles } = createStyleBuilder({
  baseFontSize: 18,
  overrideTheme: ({ baseFontSize }) => {
    dönüş {
      renkler: {
        karanlık: "#737373",
        ışık: "#e5e5e5",
        brandColorPalette: "#a1323e",
      },
      boşluk: {
        muazzam: baseFontSize * 100,
      },
    };
  },
});

Yukarıdaki örnekte, React Native Zephyr, varsayılan temadaki renkleri ve aralığı, özel temada sağladığınız renkle geçersiz kılar.

extendTheme benzer şekilde kullanabilirsiniz. overrideTheme özelliğinden farklı olarak, extendTheme özelliği varsayılan temayı geçersiz kılmak yerine genişletir.

 dışa aktarma const { makeStyledComponent, stiller, useStyles } = createStyleBuilder({
  genişletTheme: {
    renkler: {
      brandColorPalette: "#a1323e",
    },
  },
});

Temel yazı tipi boyutuna erişmek istiyorsanız, extendTheme özelliğinin değerini aşağıdaki gibi bir nesne döndüren bir işleve de ayarlayabilirsiniz:

 dışa aktarma const { makeStyledComponent, stiller, useStyles } = createStyleBuilder({
  baseFontSize: 12,
  extensionTheme: ({ baseFontSize }) => {
    dönüş {
      boşluk: {
        muazzam: baseFontSize * 100,
      },
      renkler: {
        brandColorPalette: "#a1323e",
      },
    };
  },
});

Çözüm

Bootstrap ve Tailwind CSS gibi stil çözümleri, geliştirme hızını artırdıkları için popülerdir. React Native Zephyr, Tailwind CSS deneyimini React Native'e getirmeye çalışıyor ve Tailwind CSS'ye zaten aşina iseniz onu almak kolaydır.

React Native Zephyr, sizi harekete geçirmek için cömert bir dizi değer sunan varsayılan bir tema ile donatılmıştır. Varsayılan tema ihtiyaçlarınızı karşılamıyorsa, onu makalede anlatıldığı gibi genişletebilir veya geçersiz kılabilirsiniz. Bu makaleyi yazarken genç olmasına rağmen, sizin için işe yarayıp yaramadığını görmek için React Native Zephyr'i keşfetmeye değer – umarım projeniz için faydalı bulacaksınız.

Bu makalede ele almadığımız React Native Zephyr'in birkaç özelliği vardır. Daha fazla özellik için resmi belgelere bakın. Aşağıdaki yorumlar bölümünde ne düşündüğünüzü bana bildirin.

Tanıtım yazısı Zephyr: React Native için Tailwind CSS ilk olarak LogRocket Blog'da yayınlandı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Zephyr ile Tanışın: React Native için Tailwind CSS