ScrollView — aylantiriladigan ekran, qachon ishlatmaslik

~10 daq · React Native · Asosiy komponentlar

Muammodan boshlaylik

Profil ekraniga 15 ta sozlama bandini qo'shdingiz. Telefonda — faqat birinchi 10 tasi ko'rinadi, qolganlari ekrandan pastda. Barmoq bilan surasiz — hech narsa siljimaydi.

Vebda sahifa kontenti uzun bo'lsa brauzer o'zi scroll qo'shadi. React Native da View aylanmaydi. Aylantirish kerak bo'lsa — buni aniq aytish kerak.

ScrollView

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

const bandlar = ['Profil', 'Bildirishnomalar', 'Til', 'Mavzu', 'Maxfiylik', 'Xavfsizlik',
  "To'lov usullari", 'Manzillar', 'Buyurtmalar tarixi', 'Sevimlilar', 'Yordam',
  'Biz haqimizda', 'Foydalanish shartlari', 'Chiqish'];

export default function Sozlamalar() {
  return (
    <ScrollView style={styles.ekran} contentContainerStyle={styles.ichki}>
      {bandlar.map((b) => (
        <View key={b} style={styles.band}>
          <Text style={styles.matn}>{b}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  ekran: { flex: 1, backgroundColor: '#f8fafc' },
  ichki: { padding: 16, gap: 8 },
  band: { backgroundColor: 'white', padding: 18, borderRadius: 10 },
  matn: { fontSize: 16 },
});

style va contentContainerStyle

ScrollView ikki qatlamdan iborat:

┌─────────── style ───────────┐   ← ko'rinadigan "oyna" (ekranda)
│ ┌── contentContainerStyle ─┐ │
│ │ kontent                   │ │   ← ichki, uzun kontent
│ │ ...                       │ │
│ │ ...  (oynadan tashqarida) │ │

• style — tashqi oyna: fon, flex: 1
• contentContainerStyle — ichki kontent: padding, gap, alignItems

padding ni style ga qo'ysangiz — kontent oxirida bo'sh joy bo'lmaydi va oxirgi element pastki chetga yopishadi. Ichki bo'shliqlar — contentContainerStyle da.

Gorizontal scroll

<ScrollView horizontal showsHorizontalScrollIndicator={false}
  contentContainerStyle={{ gap: 12, paddingHorizontal: 16 }}>
  {toifalar.map((t) => (
    <View key={t} style={styles.chip}>
      <Text>{t}</Text>
    </View>
  ))}
</ScrollView>

Toifalar "chip" lari, banner karuseli — gorizontal scroll ning tipik ishlatilishi.

Sahifama-sahifa (karusel)

<ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false}>
  {bannerlar.map((b) => (
    <Image key={b.id} source={{ uri: b.rasm }} style={{ width: ekranKengligi, height: 200 }} />
  ))}
</ScrollView>

pagingEnabled — har bir surish to'liq bitta sahifaga "yopishadi". (ekranKengligi — 15-darsdagi useWindowDimensions.)

Foydali xususiyatlar

<ScrollView
  showsVerticalScrollIndicator={false}       // scroll chizig'ini yashirish
  keyboardShouldPersistTaps="handled"        // klaviatura ochiq bo'lsa tugmalar ishlasin (23-dars)
  refreshControl={                            // pastga tortib yangilash
    <RefreshControl refreshing={yuklanmoqda} onRefresh={yangila} />
  }
  onScroll={(e) => console.log(e.nativeEvent.contentOffset.y)}
  scrollEventThrottle={16}
/>

Kodda scroll qilish:

const ref = useRef<ScrollView>(null);
// ...
<ScrollView ref={ref}>...</ScrollView>
// ...
ref.current?.scrollTo({ y: 0, animated: true });   // tepaga
ref.current?.scrollToEnd({ animated: true });       // oxiriga (chat)

Qachon ScrollView ISHLATMASLIK kerak

[!WARNING] ScrollView barcha bolalarini birdaniga chizadi — hatto ekrandan tashqaridagilarni ham. 15 ta sozlama — muammo yo'q. 1000 ta mahsulot — 1000 ta karta, 1000 ta rasm bir vaqtda xotirada. Ilova sekinlashadi, scroll uziladi, ba'zi telefonlarda xotira tugab, ilova yopiladi.

FlatList faqat ekranda ko'rinadigan elementlarni (va bir oz atrofini) chizadi — 10 000 ta element ham silliq aylanadi.

Yana bir qoida: bir yo'nalishdagi FlatList ni bir xil yo'nalishdagi ScrollView ichiga qo'ymang. Ogohlantirish chiqadi va FlatList ning optimizatsiyasi ishlamay qoladi. Ro'yxat tepasidagi kontent uchun — FlatList ning ListHeaderComponent i.

Nima uchun shunday?

Nima uchun View avtomatik aylanmaydi, vebdagi body kabi?

Chunki mobil ekranda scroll — "qimmat" va aniq qaror. Native scroll konteyner o'z fizikasi (inersiya, chetda "prujina" effekti), imo-ishoralarni ushlash va xotira boshqaruviga ega. Agar har bir View potentsial scroll bo'lsa — ichma-ich konteynerlar qaysi biri surilayotganini aniqlashda chalkashardi va ortiqcha resurs sarflanardi. React Native scroll ni faqat siz aniq so'ragan joyda yaratadi.

Xulosa

Eslab qoling:

• View aylanmaydi; uzun kontent — ScrollView
• style — tashqi oyna (flex: 1), contentContainerStyle — ichki bo'shliqlar
• horizontal, pagingEnabled — gorizontal ro'yxat va karusel
• refreshControl — pastga tortib yangilash; ref.scrollTo — kodda scroll
• ScrollView hammasini birdaniga chizadi — uzun ro'yxatlar uchun FlatList
• Bir yo'nalishli FlatList ni ScrollView ichiga qo'ymang

Keyingi dars

9-dars: TextInput — matn kiritish, klaviatura turlari