horizontal

horizontal prop ile yatay kaydırma öğrenirsin.

horizontal prop

horizontal prop'u ScrollView'in kayma yönünü yatay yapar. Varsayılan değer false olduğu için ScrollView dikey kayar; horizontal verildiğinde sola sağa kayar.

Yazımı şöyledir: <ScrollView horizontal> ya da <ScrollView horizontal={'{true}'}>. Kısa yazım horizontal tek başına true demektir; bu JSX kısayoludur.

Yatay kaydırmada her çocuğun genişliği kendi içeriğine bağlıdır. Sabit kart genişliği istiyorsan stile width verirsin. Bunu bir sonraki derste detaylandıracağız.

Yatay ScrollView ve genişlik

Yatay bir ScrollView'e dizdiğin kartların genişliği içeriğine göre değişir. Düzenli görünmeyebilir. Bunun için her çocuğa style ile width verirsin.

Örneğin style={'{ width: 160 }'} yazdığında kart sabit 160 piksel genişliğinde olur. Kayma sırasında kartlar hizalı kalır; bu galerilerde işine yarar.

Yatay kaydırmada contentContainerStyle ile aralara gap veya paddingHorizontal verebilirsin. Böylece kartların kenarlara yapışmasını önlersin.

Uygulama Yatay kart galerisi yaz

horizontal bir ScrollView içine üç <View> kart koy. Her kart width: 120 ve height: 120 stillensin, içine bir <Text> yaz.

Örnek çözümü göster

const styles = { card: { width: 120, height: 120, margin: 8, backgroundColor: '#eee' } };
function App() {
  return (
    <ScrollView horizontal>
      <View style={styles.card}><Text>Bir</Text></View>
      <View style={styles.card}><Text>İki</Text></View>
      <View style={styles.card}><Text>Üç</Text></View>
    </ScrollView>
  );
}
export default App;

Kendini test et

Yatay kayma ekle

import { ScrollView, Text } from 'react-native';

function App() {
  return (
    <ScrollView ____>
      <Text>Kart bir</Text>
      <Text>Kart iki</Text>
    </ScrollView>
  );
}

Cevabı göster

import { ScrollView, Text } from 'react-native';

function App() {
  return (
    <ScrollView horizontal>
      <Text>Kart bir</Text>
      <Text>Kart iki</Text>
    </ScrollView>
  );
}

horizontal prop ne yapar?
- Kayma yönünü yatay yapar
- Kayma hızını artırır
- Arka plan rengini değiştirir
- İçeriği gizler
Cevabı göster

Arka plan rengini değiştirir — horizontal ScrollView'i sola sağa kayar.
Yatay kayma eşleştirmesi

horizontal

Yatay kayma sağlar
width

Kart genişliğini sabitler
gap

Kartlar arası boşluk
vertical

Varsayılan yön

Sıradaki ders: contentContainerStyle

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler