Gyakori jelenség, hogy a megjelenő billentyűzet eltakarja a tartalom egy részét. A megoldás erre a KeyboardAvoidingView használata.
A KeyboardAvoidingView
Ez a hasznos komponens a react-native csomag tartalma, tehát nem kell külön telepíteni hozzá semmit.
A KeyboardAvoidingView hatása, hogy amikor a mobil képernyőjén a billentyűzet alulról felúszva megjelenik, akkor a tartalmat úgy tolja feljebb, hogy minden látszódjon a képernyőn. A tartalom is és a billentyűzet is.
Példa (KeyboardAvoidingView) használata nélkül
Készítettem egy Expo snack példát arra, hogy milyen az, amikor ki van takarva a tartalom. Itt a link.
Az látszik, hogy nem látszik a Submit gomb :). Erre hoz megoldást a következő példa.
Példa KeyboardAvoidingView használatával
Ez a példa pedig azt mutatja be, amikor használjuk a KeyboardAvoidingView komponenst.
A kódban látható, hogyan paramétereztem a komponenst:
<KeyboardAvoidingView behavior="padding" style={styles.container}>A hivatalos doksi úgy szól, hogy a behavior használata Android és iOS esetén is javallott, illetőleg a két rendszer eltérően is kezeli ezt a beállítást. Értékei ezek lehetnek:
- height
- position
- padding
A behavior beállítás mondja meg a React-nek, hogy hogyan jelenjen meg a billentyűzet. Adtam még neki egy stílust is, amiben a flex: 1 beállítást határoztam meg:
const styles = StyleSheet.create({
container: {
flex: 1,
},
// ...A dokumentációban meg lehet nézni a további tulajdonságokat is.
Nézd meg ezt is!
(Van ugyanis az az eset, amikor annyi tartalom van a képernyőn, hogy a KeyboardAvoidingView már ehhez kevés lenne.)