Bileşen kitaplıkları, belirli bir uygulamanın tasarım modeline uyacak şekilde yapılabilen, özelleştirilebilir ve yeniden kullanılabilir bir kod koleksiyonudur. Platformlar arasında tutarlı tasarım sağlamaya ve geliştirme sürecini hızlandırmaya yardımcı olurlar.
Burada, bir sonraki React Native uygulamanızı oluştururken React Native Elements bileşen kitaplığını nasıl kullanacağınızı öğreneceksiniz.
React Native Elements Nedir?
React Native Elements (RNE), React Native geliştiricileri tarafından Android, iOS ve web uygulamaları oluştururken yararlı olabilecek bir bileşen kitaplığı oluşturmaya yönelik açık kaynaklı bir çabadır. Pek çoğunun aksine diğer React Native bileşen kitaplıkları, RNE, TypeScript sözdizimini destekler.
Kitaplık, bileşen yapısına odaklanan 30'dan fazla bileşenden oluşur.
React Native CLI ile Reactive Native Öğeleri Yükleme
Aşağıdaki talimatlar, React Native klibi kullanılarak oluşturulan bir projeye React Native Elements yüklemek içindir.
Aşağıdakileri çalıştırarak React Native Elements'i çıplak React Native uygulamanıza kurun:
npm kurulum @rneui/themed @rneui/base
Ayrıca tepki-yerel-vektör-simgeleri ve güvenli alan-bağlamı da kurmalısınız:
npm düzenlemek tepki-yerli-vektör simgeleri tepki verir-yerli-güvenli-alan-bağlam
Bir Expo Projesinde React Native Elements Nasıl Kurulur?
React Native Elements'ı mevcut bir Fuar proje, paketi kurun ve yerel güvenli alan bağlamına tepki verin:
iplik eklemek @rneui/themed @rneui/baz tepki-yerli-güvenli alan bağlamı
Bağımlılık çatışması riskinden kaçınmak için paketleri kurarken npm veya yarn gibi bir paket yöneticisini koruyun.
Expo klibi kullanılarak oluşturulan projelerde varsayılan olarak tepki-yerel-vektör-ikonları kuruludur, bu nedenle onu yüklemenize gerek yoktur.
Single React Native Elements Bileşenlerini Şekillendirme
RNE aracılığıyla kullanılabilen tüm bileşenler, bileşeni ve bileşenin kabını şekillendirmek için çeşitli aksesuarlar alır.
Bileşenin kabı temel bir gibi bir bileşen etiketinin etrafını saran etiket. bu etiketi bileşenin çevresinde yenilmezdir ve konteynerStil görünüm stillerini uygulamak için prop.
Bir bileşen, aşağıdaki gibi varsayılan stil özelliklerini alabilir renk, tip, Ve boyut. Bir bileşen ayrıca, bileşenin stillerini işlemek için benzersiz bir özel stil desteği alabilir.
Bunların hepsi bileşen için harici stillerdir.
Örneğin, stil Düğme bileşen:
içe aktarmak { Görüş } itibaren "tepki-yerli";
içe aktarmak { Düğme } itibaren "@rneui/temalı";
sabit Bileşenim = () => {
geri dönmek (
<Görüş>
<Düğme
buttonStyle={{backgroundColor: "gri" }}
containerStyle={{ genişlik: 150 }}
>
Katı Düğme
</Button>
<Düğme
tür="anahat"
containerStyle={{genişlik: 150, kenar boşluğu: 10 }}
başlık="Anahat Düğmesi"
/>
</View>
);
}
Yukarıdaki kod, stilleri bir Button bileşenine nasıl uygulayabileceğinizi gösterir. Bir Düğme bir varsayılan kullanır tip pervane ve diğeri özel kullanır düğmeStil pervane Her iki düğme de konteynerStil görünüm stilleri eklemek için prop.
React Native Elements Bileşenleri için Temalar Oluşturma
RNE bileşenleri için temalar oluşturmak, bu bileşenlerin her örneğine bir stil uygulamak istediğinizde kullanışlıdır. Temalarla, bileşenlerinizi istenen tasarım modeline uyacak şekilde özelleştirmek kolay bir iş haline gelir.
RNE sağlar tema oluştur() bileşenlere stil verme işlevi. Bu işlev, her bileşenin dahili veya varsayılan stillerini geçersiz kılan tema stillerini tutar.
Bir tema oluşturmak için arayın tema oluştur() ve istenen tema stillerini bir işlev argümanı olarak iletin:
içe aktarmak { Tema Sağlayıcı, oluştur Tema } itibaren '@rneui/temalı';
sabit tema = tema oluştur({
bileşenler: {
Düğme: {
konteyner Stili: {
kenar boşluğu: 10,
},
başlık Stili: {
renk: "siyah",
},
},
},
});
bu Tema Sağlayıcı içine sarılmış herhangi bir bileşene stiller uygulayacaktır.
sağlayıcı kabul eder tema yukarıda oluşturulan temaya ayarlanan pervane:
<ThemeProvider theme={theme}>
<Düğme başlığı="Temalı Düğme" />
</ThemeProvider>
<Düğme başlığı="Normal Düğme" />
Tema stilleri, dahili veya varsayılan bileşen stillerini geçersiz kılar ancak harici bileşen stilini geçersiz kılmaz.
RNE'nin öncelik sırası, dış stilleri hiyerarşinin en üstüne yerleştirir.
Örnek:
// Tema
sabit tema = tema oluştur({
bileşenler: {
Düğme: {
konteyner Stili: {
kenar boşluğu: 10,
arka plan rengi: "kırmızı",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Düğme başlığı="Temalı Düğme" renk={"ikincil"}/>
</ThemeProvider>
Yukarıdaki kodda, arka plan rengi Düğme bileşen, kırmızı tema stilinin aksine yeşil bir renk olan ikincil olacaktır.
A tema nesne, RNE ile gönderilir ve kutudan çıkar çıkmaz çok sayıda varsayılan renk değeri sağlar. RNE, aşağıdakiler gibi çeşitli seçenekler sunar: TemaTüketici bileşen, tema kullan() kanca ve makeStyles() erişmek için kanca üreteci tema nesne.
bu TemaTüketici component, anonim bir işlevle işlenen bileşenlerinizi saracaktır. Bu anonim işlev tema pervane olarak
Tema değerlerine bir stil destek:
içe aktarmak Tepki itibaren 'tepki';
içe aktarmak { Düğme } itibaren 'tepki-yerli';
içe aktarmak { Tema Tüketicisi } itibaren '@rneui/temalı';
sabit Bileşenim = () => (
<TemaTüketici>
{({ tema }) => (
<Düğme başlığı="TemaTüketici" stil={{renk: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternatif olarak, tema kullan() Bir bileşenin içindeki temaya erişmek için kancayı kullanın.
Örneğin:
içe aktarmak Tepki itibaren 'tepki';
içe aktarmak { Düğme } itibaren 'tepki-yerli';
içe aktarmak { temayı kullan } itibaren '@rneui/temalı';sabit Bileşenim = () => {
sabit { tema } = useTheme();
geri dönmek (
<stili görüntüle={styles.container}>
<Düğme başlığı="temayı kullan" stil={{renk: theme.colors.primary }}/>
</View>
);
};
bu makeStyles() kanca oluşturucu, stilleri tanımlamak için bir stil sayfası kullanmaya benzer. Stil sayfası gibi, tüm stilleri işlenmiş bileşeninizin dışından ayırır. referans tema bileşen stili pervane içindeki nesne.
Temaları TypeScript ile Genişletme
RNE, uygulamanızda TypeScript bildirimlerini destekleyerek geliştiricilerin TypeScript dilini kullanmanın faydaları.
TypeScript'lerle bildirim birleştirme, hem RNE'nin varsayılan hem de özel bileşenlerine özel renkler ve aksesuarlar eklemek için tema tanımlarını genişletebilirsiniz.
Tema nesnesinin içindeki renkleri genişletmek için ayrı bir tane oluşturacaksınız. TypeScript.ts modülü dosyalayın ve bildirin @rneui/temalı dosyanın içinde.
Ardından, özel renklerinizi eklemeye devam edebilir ve beklenen türlerini belirtebilirsiniz:
// **TypeScript.ts**içe aktarmak '@rneui/themed';
ilan etmek modül '@rneui/ temalı' {
ihracat arayüzRenkler{
birincilLight: dize;
ikincil Işık: dizi;
}
}
Bu modülle, bir tema oluştururken özel renklerinizi değerler olarak iletebilirsiniz:
sabit tema = tema oluştur({
renkler: {
Birincil Işık: "",
ikincil Işık: ""
},
})
Artık özel renkler, tema nesnenizin bir parçasıdır ve kullanılarak erişilebilir. Tema Sağlayıcı, Tema Tüketici, ya da tema kullan() kanca.
RNE Bileşenleri vs. Yerel Bileşenleri Tepki
React Native Elements gibi bileşen kitaplıkları, bir uygulamayı hızlı bir şekilde çalışır duruma getirmenin harika bir yoludur. Tasarımın ayrıntıları yerine uygulamanın yapısına odaklanmanızı sağlarlar. React Native bileşenleri yerine RNE bileşenlerini kullanmak, öncelikle uygulamanızın odağına ve ne kadar geliştirme süreniz olduğuna göre yönlendirilmelidir.
