Kuidas panna oma React Native'i rakendus klaviatuuri ilmumisel graatsiliselt reageerima

React Native'i rakendustega töötamisel on tavaline probleem see, et klaviatuur ilmub üles ja peidab tekstisisestused, kui neile keskendute. Midagi sellist:

Selle vältimiseks on mõned võimalused. Mõni on lihtne, mõni vähem. Mõnda saab kohandada, teist mitte. Täna näitan teile 3 erinevat viisi, kuidas saate React Native'i klaviatuuri vältida.

Olen kogu selle õpetuse lähtekoodi Githubisse pannud.

KeyboardAvoidingView

Kõige lihtsam ja lihtsamalt installitav lahendus on KeyboardAvoidingView. See on põhikomponent, kuid see on ka üsna lihtne.

Võite võtta baaskoodi, millel on sisendeid kattev klaviatuur, ja värskendada seda nii, et sisendid ei oleks enam kaetud. Esimene asi, mida pead tegema, on asendada mahuti Viewkoos KeyboardAvoidingViewja seejärel lisage behaviorprop seda. Kui vaatate dokumentatsiooni, näete, et see aktsepteerib kolme erinevat väärtust - kõrgus, polster, asend . Olen leidnud, et polster töötab kõige ettearvatavamalt. Nii et ma kasutan seda.

import React from 'react'; import { View, TextInput, Image, KeyboardAvoidingView } from 'react-native'; import styles from './styles'; import logo from './logo.png'; const Demo = () => { return (         ); }; export default Demo;

See annab meile järgmise tulemuse. See pole ideaalne, kuid vaevalt ükskõik millise töö jaoks, see on üsna hea.

Üks asi, mida tuleb märkida, on see, et real 30 näete a View, mille kõrguseks on seatud 60 pikslit. Leidsin, et klaviatuuri vaate vältimine ei tööta päris viimase elemendiga ja polsterduse / veerise määramine ei töötanud. Niisiis lisasin uue elemendi, et kõik kokku tõmmata paar pikslit.

Selle lihtsa rakenduse kasutamisel tõuseb ülaosas olev pilt vaatest välja. Ma näitan teile, kuidas saate selle lõpuks parandada.

Androidi kasutajad: leidsin, et see on parim / ainus võimalus. Kui lisate android:windowSoftInputMode="adjustResize"oma AndroidManifest.xml-i, hoolitseb operatsioonisüsteem teie jaoks suurema osa tööst ja ülejäänud osa kannab KeyboardAvoidingView. Näide AndroidManifest.xml. Selle artikli ülejäänud osa ei kehti tõenäoliselt teie kohta.

Klaviatuuri teadlik ScrollView

Järgmine võimalus on reageerida-native-klaviatuur-teadlik-kerimisvaade, mis annab teile palju pauku. Stseenide taga on kõigega tegelemiseks ScrollView või ListView kasutamine (sõltuvalt valitud komponendist), mis muudab kerimise interaktsiooni üsna sujuvaks. Selle paketi teine ​​suurem eelis on see, et see kerib fookuses oleva sisendini, mis annab kasutajale toreda kogemuse.

Kasutamine on samuti väga lihtne - peate lihtsalt konteineri välja vahetama View, alustades jällegi baaskoodist, ja määrama mõned võimalused. Siin on kood, siis kirjeldan seda.

import React from 'react'; import { View, TextInput, Image } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' import styles from './styles'; import logo from './logo.png'; const Demo = () => { return (        ); }; export default Demo;

Kõigepealt soovite seada ScrollView'i taustavärvi sellisel viisil (kui peaksite kerimise uuesti lubama), on taustavärv alati sama. Järgmisena soovite komponendile öelda, kus vaikepositsioon on, nii et kui klaviatuur on suletud, läheb see tagasi sellesse kohta - selle rekvisiidi väljajätmisega võib vaade pärast klaviatuuri sulgemist ülaosas kinni jääda.

Pärast lähtestamist resetScrollToCoords määrate contentContainerStyle - see asendab sisuliselt Viewvarem olnud stiilid. Viimane asi, mida ma teen, on kerimisvaate keelamine kasutajate suhtlemisel. See ei pruugi teie kasutajaliidese jaoks alati mõistlik olla (näiteks liides, kus kasutaja redigeerib paljusid profiilivälju), kuid selle jaoks on see nii, pole eriti mõtet lubada kasutajal käsitsi kerida, sest pole midagi kerida kuni.

Nende rekvisiitide ühendamisel saate järgmise tulemuse, mis töötab üsna hästi.

Klaviatuurimoodul

See on ülekaalukalt kõige manuaalsem variant, kuid annab ka kõige suurema kontrolli. Kasutate animeeritud teeki, et saaksite sujuvalt suhelda, nagu varem nägite.

Klaviatuurimoodul, mida pole React Native saidil dokumenteeritud, võimaldab teil kuulata seadmest emiteeritud klaviatuuri sündmusi. Kasutatavad sündmused on keyboardWillShow ja keyboardWillHide , mis tagastavad animatsiooni kestuse ja klaviatuuri lõppasendi (muu teabe hulgas).

Kui kasutate Android-i, soovite selle asemel kasutada keyboardDidShow ja keyboardDidHide.

Kui keyboardWillShow sündmus on emiteeritud, määrate animeeritud muutuja klaviatuuri lõplikule kõrgusele ja lasete sellel animatsiooni anda sama kaua kui klaviatuuri libisev animatsioon. Seejärel saate selle animeeritud väärtuse abil määrata sisu konteineri põhja, et kogu sisu üles tõsta.

Näitan koodi hetkega, kuid ülalkirjeldatu tegemine jätab meile selle kogemuse.

Ma tahan selle pildi seekord parandada. Selleks kasutate pildi kõrguse haldamiseks animeeritud väärtust, mida saate reguleerida klaviatuuri avamisel. Siin on kood.

import React, { Component } from 'react'; import { View, TextInput, Image, Animated, Keyboard } from 'react-native'; import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL} from './styles'; import logo from './logo.png'; class Demo extends Component { constructor(props) { super(props); this.keyboardHeight = new Animated.Value(0); this.imageHeight = new Animated.Value(IMAGE_HEIGHT); } componentWillMount () { this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); } componentWillUnmount() { this.keyboardWillShowSub.remove(); this.keyboardWillHideSub.remove(); } keyboardWillShow = (event) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duration: event.duration, toValue: event.endCoordinates.height, }), Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT_SMALL, }), ]).start(); }; keyboardWillHide = (event) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duration: event.duration, toValue: 0, }), Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT, }), ]).start(); }; render() { return (        ); } }; export default Demo;

Selles on kindlasti palju muud lahendust. Selle asemel, et tavaline Viewvõi Imagekasutate Animated.Viewja Animated.Image, et animeeritud väärtusi saaks kasutada. Lõbus osa on tõesti funktsioonides keyboardWillShow ja keyboardWillHide, kus animeeritud väärtused muutuvad.

Seal toimub see, et kaks animeeritud väärtust muutuvad paralleelselt, mida seejärel kasutatakse kasutajaliidese juhtimiseks. See jätab selle teile.

See on üsna palju koodi, kuid see on üsna libe. Teil on palju võimalusi selle kohta, mida saate teha, ja saate selle interaktsiooni oma südamele vastavalt kohandada.

Valikute ühendamine

Kui soovite mõnda koodi salvestada, võite kombineerida mõned võimalused, mida ma kipun tegema. Näiteks kombineerides võimalusi 1 ja 3, peate muretsema ainult pildi kõrguse haldamise ja animeerimise pärast.

Kood pole palju väiksem kui valiku 3 allikas, kuid kui kasutajaliidese keerukus kasvab, võib see teid natuke aidata.

import React, { Component } from 'react'; import { View, TextInput, Image, Animated, Keyboard, KeyboardAvoidingView } from 'react-native'; import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL } from './styles'; import logo from './logo.png'; class Demo extends Component { constructor(props) { super(props); this.imageHeight = new Animated.Value(IMAGE_HEIGHT); } componentWillMount () { this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); } componentWillUnmount() { this.keyboardWillShowSub.remove(); this.keyboardWillHideSub.remove(); } keyboardWillShow = (event) => { Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT_SMALL, }).start(); }; keyboardWillHide = (event) => { Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT, }).start(); }; render() { return (        ); } }; export default Demo;

Igal rakendusel on oma plussid ja miinused - peate valima sobivaima, arvestades soovitud kasutuskogemust.

Kas olete huvitatud lisateavet React Native'i kasutamise kohta kvaliteetsete mobiilirakenduste loomiseks? Registreeru minu tasuta React Native kursusele!