ScrollView

A ScrollView komponens a képernyő bizonyos részét görgethetővé teszi úgy, hogy a benne levő tartalom továbbra is érzékeny marad az érintésekre. (Webes oldalról érkezőknek azt mondom, hogy kattintható marad a tartalom.)

ScrollView használati jótanácsok

Írhattam volna szabályokat is a jótanácsok helyett, de az túl erős lett volna. Inkább azt mondom, hogy ezek olyan tanácsok amiket a helyes működés érdekében mindenképpen érdemes betartani.

Ráadásul ezeket nem csak én írom, hanem a hivatalos doksi is. Na, de akkor nézzük.

Szóval a ScrolView szereti tudni, hogy az a tartalom, amit ő görgethetővé szeretne tenni, az valami véges hosszúsággal bír. Magyarul olyan tartalmat érdemes ebbe a komponensbe zárni, ami valóban nem egy végtelen vagy beláthatatlan hosszú listát jelent. Ennek érdekében vagy a ScrollView-nak vagy az őt tartalmazó konténer elemnek célszerű megadni a

{ flex: 1 }

stílus beállítást.

Ez ugyebár azt jelenti, hogy az elem a képernyő adott részén, kitölti a teljes rendelkezésre álló területet.

Komponensek betöltése

A másik, amit tuti jó észben tartani, hogy a ScrollView komponensen belül a teljes tartalom egyszerre betöltődik. Tehát az összes gyerek komponens egyszerre renderelődik. Elképzelhető akkor, hogy ha mondjuk egy sok ezer soros lista egyszerre töltődik be, akkor a mobilalkalmazás szépen belassul, „mancizik”. Azaz perforManciális gondok lesznek. 🙂

Szerencsére létezik egy másik komponens is, ami az ilyen baromi hosszú listákra való. Ez pedig a FlatList.

Így használd

A következőkben mutatok egy kódrészletet a használatra:

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

const App = () => {
  return (
    <View style={styles.container}>
      <ScrollView>
        <Text>Képzeljünk el ide egy elég hosszú szöveget ahhoz, hogy a képernyők görgetni kelljen ahhoz, hogy lássuk az alját...</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});