# React Native Elements Tasarım Sistemi ## React Native Elements Tasarım Sistemi Arayüzü Önizlemesi Görevi, süreyi ve mola seçimini düzenleyin; doğrulamayı, görünümü ve sıfırlamayı inceleyin. ## React Native Elements Tasarım Sistemi Tasarım Referansı Sabitlenmiş RNEUI kaynak varsayılanları, herkese açık bileşen API'leri ve açıkça belirtilen uygulama tercihleri. ### Açık tema renkleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | lightColors.primary | #2089dc | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.secondary | #ad1457 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.background | #ffffff | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.black | #242424 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.white | #ffffff | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.grey1 | #43484d | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.grey2 | #5e6977 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.grey5 | #e1e8ee | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.success | #52c41a | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.error | #ff190c | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | lightColors.warning | #faad14 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | ### Koyu tema renkleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | darkColors.primary | #439ce0 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.secondary | #aa49eb | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.background | #080808 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.black | #f2f2f2 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.white | #080808 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.grey1 | #bdc6cf | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.grey2 | #86939e | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.grey5 | #393e42 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.success | #439946 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.error | #bf2c24 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | | darkColors.warning | #cfbe27 | Gerçek RNEUI tema değeri. Black/white gibi roller, koyu modda görsel anlamlarının tersine döner; sabit renk değerleri yerine etkin temayı kullanın. | ### Varsayılan boşluklar ve uygulamaya özgü açık tercihler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | spacing.xs | 2 | Yayımlanmış varsayılan boşluk girdisi; bu adlar bir tema nesnesi oluşturur, CSS değişken belirteçleri değil. | | spacing.sm | 4 | Yayımlanmış varsayılan boşluk girdisi; bu adlar bir tema nesnesi oluşturur, CSS değişken belirteçleri değil. | | spacing.md | 8 | Yayımlanmış varsayılan boşluk girdisi; bu adlar bir tema nesnesi oluşturur, CSS değişken belirteçleri değil. | | spacing.lg | 12 | Yayımlanmış varsayılan boşluk girdisi; bu adlar bir tema nesnesi oluşturur, CSS değişken belirteçleri değil. | | spacing.xl | 24 | Yayımlanmış varsayılan boşluk girdisi; bu adlar bir tema nesnesi oluşturur, CSS değişken belirteçleri değil. | | Sample heading | 32px / weight 700 | Sağlanan kaynakta açıkça yapılandırılmış özgün örnek tercihi; resmî bir genel tür veya yarıçap belirteci olarak gösterilmez. | | Sample body | 15px / 23px line height | Sağlanan kaynakta açıkça yapılandırılmış özgün örnek tercihi; resmî bir genel tür veya yarıçap belirteci olarak gösterilmez. | | Sample cards | 24px padding / 8px radius | Sağlanan kaynakta açıkça yapılandırılmış özgün örnek tercihi; resmî bir genel tür veya yarıçap belirteci olarak gösterilmez. | | Button component default | radius: 6 | Sağlanan kaynakta açıkça yapılandırılmış özgün örnek tercihi; resmî bir genel tür veya yarıçap belirteci olarak gösterilmez. | ### Bileşen ve sağlayıcı sözleşmeleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | createTheme | mode, components, lightColors, darkColors | ThemeProvider, oluşturulan nesneyi alır; yalnızca bileşenler değiştirildiğinde varsayılanlar kullanılabilir durumda kalır. | | useTheme | theme, updateTheme | Görünüm eylemi, uygulama durumunu sıfırlamadan modu değiştirir. | | Input | value, onChangeText, errorMessage, ref | Boş görev hatası görünür ve odak gerçek girdiye döner. | | ButtonGroup | buttons, selectedIndex, onPress | Denetimli dizin, 15, 25 veya 45 dakikayı seçer; sürenin kendisi değildir. | | Switch | value, onValueChange | Denetimli boolean değeri, mola açıklamasını değiştirir. | | Card | Card.Title, Card.Divider | Yapılandırılmış yüzeyler, seçili temayı devralır. | | Button | title, onPress, type | Kaydetme eylemi yerel durumu doğrular; sıfırlama varsayılanları geri yükler. | | SafeAreaProvider | Outer application provider | Gerekli entegrasyon bağlamı; web'de başarılı çalışması, yerel cihaz güvenli alan davranışını kanıtlamaz. | ## React Native Elements Tasarım Sistemi Eksiksiz Kılavuzu Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## React Native Elements Tasarım Sistemi Çalışma Zamanı ve Web Kapsamı ### Gerçek temalı bileşenleri çalıştırın > Bu örnekte @rneui/themed ve @rneui/base 5.0.0, React 19.2.0 ve React Native Web 0.21.3 kullanılır. Tarayıcı derlemesi, react-native yerine react-native-web takma adını kullanır ve genel JavaScript modüllerinden önce .web.js modüllerini seçer. Bunlar, mobil ekran görüntüsünü taklit eden HTML kutuları değil, web için oluşturulan gerçek kitaplık bileşenleridir. Sağlanan derleme dosyasında bu çözümleme tercihi yer alır; böylece bağımsız kod önizlemeyi yeniden oluşturur. ### Web ve yerel ortam kanıtlarını ayrı tutun Bu düzenleme, çalışan bir zamanlayıcı veya bildirim yöneticisi değil, bir odaklanma planı düzenleyicisidir. Entegrasyon gereği SafeAreaProvider uygulamayı sarar; ancak bu tarayıcı testi iOS veya Android kenar boşluklarını, yerel klavye davranışını ya da cihaz bildirim izinlerini doğrulamaz. Yerel bir proje, bu ortak bileşen örneklerine ek olarak platform derlemesi ve cihaz testleri gerektirir. - Web'de görüntüleme için React Native Web kullanılır. - Plan yalnızca yerel React durumunda tutulur. - Zamanlayıcı, sistem bildirimi veya arka uç kaydetme işlemi başlatılmaz. ## React Native Elements Tasarım Sistemi Tema Nesneleri ve Renkleri ### Etkin tema rollerini kullanın createTheme, yerleşik açık ve koyu renkleri açıkça belirtilen geçersiz kılmalarla birleştirir. Örnek yalnızca bileşen varsayılanlarını ve modu değiştirir. useTheme, çözümlenmiş renkleri çevredeki View ve Text öğelerine sağlar; böylece büyük başlık, açıklamalar ve paneller seçili görünüme uyar. Koyu modda black, açık ön plan rolünü; white ise koyu yüzey rolünü belirtir. Bu adları doğrudan renk değerleri olarak ele almak temayı bozar. ### Evrensel bir tipografi ölçeği uydurmayın RNEUI, bir CSS tasarım sistemiyle aynı belirteç modelini sunmak yerine bileşen varsayılanları ve özelleştirme kancaları sağlar. Bu nedenle referans, gerçek defaultSpacing girdilerini örnekteki 32px başlık, 15px gövde metni ve 8px kart yarıçapından ayrı gösterir. Bu boyutlar kodda görülen özgün düzenleme tercihleridir. Zorunlu React Native Elements marka kuralları olarak tanımlanmamalıdır. ## React Native Elements Tasarım Sistemi Girdi Doğrulama ve Odak ### Görev metnini açıkça denetleyin Input, value ve onChangeText geri çağrısı alır. Saklama eylemi, boş olup olmadığına karar vermeden önce değeri kırpar. Değer boşsa errorMessage somut bir istek görüntüler ve bileşen başvurusu odağı girdiye geri verir. Metin değiştirildiğinde önceki hata temizlenir ve yerel onay geçersiz kılınır; böylece eski bir kaydedildi mesajının düzenlenmiş bir planı tanımlaması önlenir. ### Etiketi ve hatayı birlikte kullanın Görünür Focus task etiketi ile accessibilityLabel aynı denetimi adlandırır. Yer tutucu içerik önerir, ancak etiketin yerini tutmaz. Doğrulama her tuş vuruşunda değil, açık saklama eylemiyle tetiklenir. Kullanıcı hata sonrasında taslağı korur ve hiçbir eşzamansız kaydetme animasyonu gerçekleşmeyen bir sunucu isteği izlenimi vermez. ## React Native Elements Tasarım Sistemi Denetimli Seçim ### Seçili dizini süreden ayrı tutun ButtonGroup üç etiket, selectedIndex ve onPress alır. Döndürülen dizin, özgün [15, 25, 45] dakika listesinden bir değer seçer; bu dizini doğrudan dakika sayısı olarak geçirmek uygulama hatasına yol açar. Önizlemedeki büyük sayısal özet, bölümlemeli denetim ile okunabilir planın çelişmemesi için aynı seçili dizinden türetilir. ### Mola seçimini gerçek bir boolean olarak kullanın Switch bileşeni, value ve onValueChange alır; erişilebilir adı ayarı açıklamalıdır. Özet metni, kısa bir mola ile mola hatırlatıcısının kapalı olduğu durum arasında değişir. Bu yalnızca bir plan tercihidir: arayüz, sistem hatırlatıcısı kaydetmez veya bildirim zamanlamaz. Onay metni, bu ayarın yalnızca yerel kapsamda olduğunu yinelemelidir. ## React Native Elements Tasarım Sistemi Durumunun Korunması ve Sıfırlanması ### Temayı plandan bağımsız tutun Görünüm değiştirildiğinde updateTheme, diğer modla çağrılır. Görev, seçilen süre, mola ayarı ve yerel onay, bu güncellemenin dışında uygulama durumu olarak kalır. Yerel bileşenler, plan yeniden oluşturulmadan yeni temayı alır. Tarayıcı kontrolünde, görsel modun verileri sıfırlamayla yanlışlıkla ilişkilendirilmediğini doğrulamak için özel bir görev girildikten sonra görünüm değiştirilir. ### Tek ve açık bir kurtarma eylemi kullanın Planı sıfırla eylemi örnek görevi, 25 dakikalık süreyi ve etkin molayı geri yükler; doğrulama hatasını temizler ve onayı kaldırır. Seçili görünümü korur. Böylece içerik sıfırlama tema tercihinden ayrılır ve beklenmedik bir tam sayfa yenilemesi önlenir. Örnekte bir kalıcılık katmanı bulunmadığından belge yeniden açıldığında başlangıçtaki örnek yüklenir. ## React Native Elements Tasarım Sisteminde Duyarlı Yerleşim ### İki kartlı düzeni uyarlayın İçerik, 700px’in üzerindeki genişliklerde satır, daha dar genişliklerde ise sütun düzenini seçmek için useWindowDimensions kullanır. Düzenin hizalamasını 24px’lik boşluk belirlediğinden her Card bileşeninin dış kenar boşluğu sıfırdır. 500px’in altındaki genişliklerde dış dolgu 16px’e düşer. İki kart, yinelenen dekoratif yer tutucular yerine düzenlenebilir bir plan ve bu plandan türetilen bir özet sunar. ### Bileşen varsayılanlarını her iki temada da inceleyin RNEUI bileşenlerinin iç yapısı, genel renklere ek olarak kendi varsayılan stillerini kullanabilir. Örneğin bu örnekte, seçilmemiş ButtonGroup bölümleri kendi yerel yüzey stillerini korur. Farklı bir kontrast veya görsel yoğunluk gerektiren bir ürün, buttonStyle ve selectedButtonStyle değerlerini açıkça belirtebilir; ancak bu karar otomatik genel tema uygulamasına bağlanmak yerine test edilmelidir. ## React Native Elements Tasarım Sistemi İçin Eksiksiz Tarayıcı Kurulumu ### Web çözünürlüğünü ve varlık yükleyicilerini ekleyin Sağlanan build.mjs, JavaScript bağımlılıkları için JSX ayrıştırmayla birlikte esbuild, react-native-web takma adı, .web.js önceliği ve paketlenmiş PNG ile TTF varlıkları için veri yükleyicileri kullanır. Paket giriş noktası, görünür bileşimde simge bulunmasa bile bu varlıklara başvuran dışa aktarımlar içerir. Bu nedenle derleme, işlenmemiş kaynak kodun doğrudan tarayıcıya aktarılmasıyla değiştirilemez. ### Yerel etkileşimin tamamını test edin Sağlanan kaynak kodunu rne.jsx, HTML dosyasını index.html adıyla kaydedin; sabitlenmiş paketleri yükleyip derlemeyi çalıştırın ve dizini sunun. Boş görev, özel görev, farklı süre, mola anahtarı, görünüm ve sıfırlama seçeneklerini test edin. Bu, sağlanan bileşimin çalıştığını doğrular; dışa aktarılan tüm RNEUI bileşenlerini veya her yerel platformu otomatik olarak doğrulamaz. 1. Sağlanan üç dosyayı aynı dizinde tutun. 2. Sabitlenmiş bağımlılıkları yükleyin ve node build.mjs komutunu çalıştırın. 3. Oluşturulan paketi index.html ile sunun. 4. Boş, düzenlenmiş, temalandırılmış ve sıfırlanmış durumları deneyin. ## React Native Elements Tasarım Sistemi Bileşen Örnekleri ### rne.jsx Sağlayıcıyı, yerel bileşenleri ve uygulama durumunu eksiksiz kullanın. ``` import React,{useState,useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {View,Text,useWindowDimensions} from 'react-native'; import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed'; import {SafeAreaProvider} from 'react-native-safe-area-context'; const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}}); function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return REACT NATIVE ELEMENTS · WEB STUDYMake room for one thing