horizontal
- React Native kursu
- Başlangıç
- Ders 60/116
- 4 dk
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.
Başlangıç kodu
import { ScrollView, View, Text } from 'react-native';
// yatay galeriyi buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Yatay kayma ekle
import { ScrollView, Text } from 'react-native';
function App() {
return (
<ScrollView ____>
<Text>Kart bir</Text>
<Text>Kart iki</Text>
</ScrollView>
);
}import { ScrollView, Text } from 'react-native';
function App() {
return (
<ScrollView horizontal>
<Text>Kart bir</Text>
<Text>Kart iki</Text>
</ScrollView>
);
}Açıklama: horizontal prop yatay kaymayı açar.
2 horizontal prop ne yapar?
- Kayma yönünü yatay yapar
- Kayma hızını artırır
- Arka plan rengini değiştirir Doğru cevap
- İçeriği gizler
Açıklama: horizontal ScrollView'i sola sağa kayar.
3 Yatay kayma eşleştirmesi
| Kavram | Anlamı |
|---|---|
horizontal |
Yatay kayma sağlar |
width |
Kart genişliğini sabitler |
gap |
Kartlar arası boşluk |
vertical |
Varsayılan yön |