Mobil uygulamalar geliştiriyorsanız, React Native Elements bileşen kitaplığını anlamanız gerekir.
Bileşen kitaplıkları, belirli bir uygulamanın tasarım modeline uyacak şekilde yapılabilecek özelleştirilebilir ve yeniden kullanılabilir kod koleksiyonudur. Platformlar arasında tutarlı tasarımın korunmasına yardımcı olur ve geliştirme sürecini hızlandırır.
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ştiricilerinin Android, iOS ve web uygulamaları oluştururken faydalı olabilecek bir bileşen kitaplığı oluşturmaya yönelik açık kaynaklı bir çabasıdır. Diğer birçok React Native bileşen kitaplığının aksine , RNE TypeScript sözdizimini destekler.
Kütüphane, bileşen yapısına odaklanan 30’dan fazla bileşenden oluşur.
React Native CLI ile Reactive Native Elements Kurma
Aşağıdaki talimatlar, React Native cli 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 yükleyin:
npm install @rneui/themed @rneui/base
Ayrıca tepki-yerel-vektör simgeleri ve güvenli alan bağlamı da yüklemelisiniz:
npm install react-native-vector-icons react-native-safe-area-context
Bir Expo Projesinde React Native Elements Nasıl Kurulur
React Native Elements’i mevcut bir Expo projesine kurmak için paketi ve tepki-yerel-güvenli-alan-bağlamını kurun:
yarn add @rneui/themed @rneui/base react-native-safe-area-context
Bağımlılık çatışmaları riskinden kaçınmak için paketleri kurarken npm veya iplik gibi bir paket yöneticisini koruyun.
Expo cli kullanılarak oluşturulan projelerde varsayılan olarak tepki-yerel-vektör simgeleri kuruludur, bu nedenle yüklemeniz gerekmez.
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 kapsayıcısı, <Button/> gibi bir bileşen etiketinin etrafına sarılmış temel bir <View/> etiketidir . <View/> etiketi , bileşen etrafında yenilmezdir ve görünüm stillerini uygulamak için bir containerStyle desteği alır.
Bir bileşen, color , type ve size gibi varsayılan stil özelliklerini alabilir . Bir bileşen, bileşenin stillerini işlemek için benzersiz bir özel stil prop da alabilir.
Bunların tümü, bileşen için harici stillerdir.
Örneğin, Düğme bileşenine stil vermek:
import { View } from “react-native”;
import { Button } from “@rneui/themed”;
const MyComponent = () => {
return (
<View>
<Button
buttonStyle={{ backgroundColor: “grey” }}
containerStyle={{ width: 150 }}
>
Solid Button
</Button>
<Button
type=”outline”
containerStyle={{ width: 150, margin: 10 }}
title=”Outline Button”
/>
</View>
);
}
Yukarıdaki kod, bir Düğme bileşenine nasıl stil uygulayabileceğinizi gösterir. Bir Düğme varsayılan türde bir pervane kullanır ve diğeri özel buttonStyle prop’unu kullanır . Her iki düğme de görünüm stilleri eklemek için containerStyle desteğini kullanır.
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 istediğiniz tasarım modeline uyacak şekilde özelleştirmek kolay bir iş haline gelir.
RNE, bileşenlere stil vermek için bir createTheme() işlevi sağlar. Bu işlev, her bileşenin dahili veya varsayılan stillerini geçersiz kılan tema stillerini tutacaktır.
Bir tema oluşturmak için createTheme() ‘i çağırın ve istenen tema stillerini işlev argümanı olarak iletin:
import { ThemeProvider, createTheme } from ‘@rneui/themed’;
const theme = createTheme({
components: {
Button: {
containerStyle: {
margin: 10,
},
titleStyle: {
color: “black”,
},
},
},
});
ThemeProvider, içine sarılmış herhangi bir bileşene stiller uygular .
Sağlayıcı, yukarıda oluşturulan temaya ayarlanmış bir tema desteğini kabul eder:
<ThemeProvider theme={theme}>
<Button title=”Themed Button” />
</ThemeProvider>
<Button title=”Normal Button” />
Tema stilleri, dahili veya varsayılan bileşen stillerini geçersiz kılar ancak harici bir bileşen stilini geçersiz kılmaz.
RNE’nin öncelik sırası, harici stilleri hiyerarşinin en üstüne yerleştirir.
Örnek:
// Theme
const theme = createTheme({
components: {
Button: {
containerStyle: {
margin: 10,
backgroundColor: “red”,
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Button title=”Themed Button” color={“secondary”}/>
</ThemeProvider>
Yukarıdaki kodda, Düğme bileşeninin arka plan rengi, kırmızı tema stilinin aksine yeşil bir renk olan ikincil olacaktır.
Bir tema nesnesi, kutudan çıkar çıkmaz çok sayıda varsayılan renk değeri sağlayan RNE ile birlikte gönderilir. RNE, tema nesnesine erişmek için ThemeConsumer bileşeni, useTheme() kancası ve makeStyles() kanca oluşturucu gibi çeşitli seçenekler sunar .
ThemeConsumer bileşeni , oluşturulan bileşenlerinizi anonim bir işlevle sarar. Bu anonim işlev, temayı bir destek olarak alır.
Bir stil desteği ile tema değerlerine erişebilirsiniz :
import React from ‘react’;
import { Button } from ‘react-native’;
import { ThemeConsumer } from ‘@rneui/themed’;
const MyComponent = () => (
<ThemeConsumer>
{({ theme }) => (
<Button title=”ThemeConsumer” style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternatif olarak, bir bileşenin içindeki temaya erişmek için useTheme() kancasını kullanabilirsiniz.
Örneğin:
import React from ‘react’;
import { Button } from ‘react-native’;
import { useTheme } from ‘@rneui/themed’;
const MyComponent = () => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<Button title=”useTheme” style={{ color: theme.colors.primary }}/>
</View>
);
};
makeStyles () kanca oluşturucu, stilleri tanımlamak için bir stil sayfası kullanmaya benzer. Stil sayfası gibi, herhangi bir stili oluşturulan bileşeninizin dışından ayırır. Bir bileşen stili prop içindeki tema nesnesine başvurma .
TypeScript ile Temaları Genişletme
RNE, uygulamanızdaki TypeScript bildirimlerini destekleyerek geliştiricilerin TypeScript dilini kullanmanın avantajlarından yararlanmasına olanak tanır .
TypeScripts bildirim birleştirme ile , hem RNE’nin varsayılan hem de özel bileşenleri için özel renkler ve aksesuarlar eklemek üzere tema tanımlarını genişletebilirsiniz.
Tema nesnesinin içindeki renkleri genişletmek için ayrı bir TypeScript.ts dosyası oluşturacak ve dosyanın içinde @rneui/themed modülünü bildireceksiniz .
Ardından, özel renklerinizi eklemeye ve beklenen türlerini belirlemeye devam edebilirsiniz:
// **TypeScript.ts**
import ‘@rneui/themed’;
declare module ‘@rneui/themed’ {
export interface Colors {
primaryLight: string;
secondaryLight: string;
}
}
Bu modül ile bir tema oluştururken özel renklerinizi değerler olarak iletebilirsiniz:
const theme = createTheme({
colors: {
primaryLight: “”,
secondaryLight: “”
},
})
Artık özel renkler tema nesnenizin bir parçasıdır ve ThemeProvider, ThemeConsumer veya useTheme() kancası kullanılarak erişilebilir.
RNE Bileşenleri ve React Native Bileşenleri
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ürenize sahip olduğunuza göre yönlendirilmelidir.