TouchableOpacity komponens

A TouchableOpactiy komponens érinthetővé (interaktívvá) tesz egy képernyő elemet, és amikor rábökünk, akkor vizuális visszajelzést is kapunk.

Mit jelent ez? Amikor a képernyőn rábökünk egy elemre, akkor azt fogjuk látni a képernyőn, hogy az elem, amit megérintettünk egy kissé áttetszővé válik. Tehát valamilyen vizuális effektus lesz az eredménye az érintési műveletnek.

TouchableOpacity használata

Mivel a react-native csomag része, onnét is kell importálni, akárcsak a Pressable-t:

import { TouchableOpacity } from "react-native";

A hivatalos dokumentáció azt írja, hogy ha egy több extrával rendelkező cuccot akarunk használni, akkor használjuk a Pressable-t. Vannak esetek amikor nem kell nekünk a Pressable több funkcionalitása.

Ha csupán azt szeretnénk, hogy látványosabb legyen az érintés ténye, akkor a TouchableOpacity bőven megfelel nekünk.

Példa

<TouchableOpacity
    style={styles.button}
    onPress={onPress}
>
    <Text>Press Here</Text>
</TouchableOpacity>

Ez csak egy kódrészlet, amiből egyértelműen látszik hogyan kell használni a komponenst. Látható, hogy lehet dizájnolni is (style tulajdonsággal), és az onPress eseménykezelőhöz pedig tetszés szerinti „akciót” írhatunk.

Az általam készített Expo Snack itt érhető el.