A Pressable nyomkodhatóvá képes tenni egy képernyő elemet. Vagyis, ha megérintjük, akkor valami interakció fog történni. A React Native 0.63-as verziójától kezdve elérhető ez a komponens.
Példa a hivatalos doksi alapján
A React Native dokumentációja azért is jó, mert a példák azonnal kipróbálhatók, ugyanis Expo Snack-et használtak erre. Bár van amikor én is készítek Snack-et és itt most nem az ennivalóra gondolok :).
A Pressable dokumentációjában is van egy működő példa, így én most nem készítettem saját mintapéldát.
Használat
Ami mindenképpen kell nekünk a Pressable használatához, az egy importálás. A react-native csomag része ez a komponens is:
import { Pressable } from 'react-native';Aztán a doksi alapján az alap forma az, hogy a <Pressable></Pressable> párral kell körbevenni azt, amit kattinthatóvá szeretnénk tenni a képernyőn:
<Pressable onPress={onPressFunction}>
<Text>I'm pressable!</Text>
</Pressable>Kattintás kezelése: onPress
Az onPress esemény kezelőnek egy függvény van átadva. Ez a felelős a kattintás hatására végrehajtandó funkciókért. Egy ilyen kezelő függvényben pedig határ szinte a csillagos ég, hogy mit teszünk bele.
Hasonló témák
Létezik egy egyszerűbb alternatívája. Ez a TouchableOpacity, amit akkor használunk, ha bőven elegendő az, hogy az érintés hatására kapunk egy vizuális effektet. A hivatalos dokumentációban is az olvasható, hogy ha egy kissé extrább komponenst akarunk használni, akkor használjuk inkább a Pressable komponenst.