React Native'de styling nasıl çalışır?

Question

Accepted Answer

React Native styling, `style` prop aracılığıyla uygulanan ve genellikle `StyleSheet` ile organize edilen **JavaScript nesneleri** (CSS dosyaları değil) kullanır. **Flexbox tabanlı** bir layout sistemi kullanır. Konseptler CSS'e benzerse de JavaScript sözdizimi ve bazı farklılıklar vardır. ## JavaScript nesneleriyle Styling ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — define styles as JS objects (camelCase properties) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (not background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` Stiller, **camelCase** özellik adlarına sahip **JavaScript nesneleridir** (`background-color` değil `backgroundColor`); `StyleSheet.create` onları organize eder. Ayrıca inline nesneler veya stil dizileri geçirebilirsiniz. ## Flexbox layout (varsayılan) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Web CSS'den farklılıklar ```text ✓ JS objects, camelCase props; no CSS files/classes; values often unitless numbers ✓ FLEXBOX by default (flexDirection defaults to 'column', unlike web's 'row') ✓ A subset of CSS properties (not everything web CSS has); some RN-specific behavior ✓ No cascade/inheritance like CSS (styles are per-component); use style arrays to combine ``` ## Neden önemli React Native'de styling'i anlamak, **herhangi bir UI oluştururken styling gerekli olduğu** için temel bir bilgidir ve React Native'nin yaklaşımı web CSS'den farklı olduğu için, bu zorunlu olan pratik bilgidir. React Native stilleri, CSS dosyaları yerine **JavaScript nesneleriyle** (`style` prop aracılığıyla, `StyleSheet` ile organize edilerek) UI'lar oluşturur — ve bunu anlamak (camelCase özellik adları gibi `backgroundColor`, stilleri JS nesneleri olarak tanımlamak, dizilerle stilleri birleştirmek) React Native bileşenini stil vermek için gereklidir. **Flexbox tabanlı layout sistemini** anlamak özellikle önemlidir: React Native layout için Flexbox kullanır (web Flexbox gibi, flexDirection, justifyContent, alignItems ile), ancak önemli fark olarak **flexDirection varsayılan olarak 'column'** ('row' olarak web'de değil) — yaygın bir kafa karışıklığı noktası. Flexbox birincil layout mekanizması olduğu için, onu anlamak UI'ları düzenlemek için gereklidir. **Web CSS'den farklılıkları** anlamak, özellikle web geliştiricileri için önemlidir: CSS dosyaları/sınıfları yerine camelCase ile JS nesneleri, birim içermeyen sayısal değerler, CSS özelliklerinin bir alt kümesi (web'in tümü değil), column varsayılan flexbox ve CSS'deki gibi cascade/inheritance yok (stiller bileşen başınadır) — bu farklılıklar anlayış sağlayan yaygın engel noktalarıdır. Konseptler CSS'e benzese de (web geliştiricileri için erişilebilir hale getirse), sözdizimi ve bazı davranışlar farklıdır, bu nedenle React Native'nin spesifik yaklaşımını anlamak gereklidir. Stlying herhangi bir UI oluştururken gerekli olduğu ve React Native'nin JS-nesnesi, Flexbox tabanlı yaklaşımı (web CSS'den farklılıkları ile) nasıl yapıldığı olduğu için, React Native'de styling'i anlamak gereklidir, temel pratik bilgisi — herhangi bir React Native arayüzü oluşturmak için gereklidir ve web geliştiricileri için CSS'den farklılıkları anlamak önemlidir, React Native UI geliştirmede sürekli kullanılan temel bir beceridir.