Sådan får du din React Native-app til at reagere yndefuldt, når tastaturet dukker op

Når du arbejder med React Native-apps, er et almindeligt problem, at tastaturet dukker op og skjuler tekstindgange, når du fokuserer på dem. Noget som dette:

Der er et par måder, du kan undgå dette på. Nogle er enkle, andre mindre. Nogle kan tilpasses, andre ikke. I dag viser jeg dig 3 forskellige måder, du kan undgå tastaturet på React Native.

Jeg har lagt al kildekoden til denne tutorial på Github.

KeyboardAvoidingView

Den mest enkle løsning og den nemmeste at installere er KeyboardAvoidingView. Det er en kernekomponent, men det er også ret simpelt i, hvad det gør.

Du kan tage basiskoden, som har tastaturet, der dækker indgangene, og opdatere den, så indgangene ikke længere er dækket. Den første ting du skal gøre er at udskifte beholderen Viewmed beholderen KeyboardAvoidingViewog derefter tilføje en behaviorprop til den. Hvis du ser på dokumentationen, vil du se, at den accepterer 3 forskellige værdier - højde, polstring, position . Jeg har fundet ud af, at polstring fungerer på den mest forudsigelige måde. Så det er hvad jeg vil bruge.

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;

Dette giver os følgende resultat. Det er ikke perfekt, men til næsten ingen arbejde er det ganske godt.

En ting at bemærke er, at på linje 30 kan du se en, Viewder har en højde indstillet til 60 pixel. Jeg fandt ud af, at tastaturet, der undgår visning, ikke helt fungerer med det sidste element, og at indstille polstring / margen ikke fungerede. Så jeg tilføjede et nyt element til at "bumpe" alt et par pixels.

Billedet øverst bliver skubbet ud af visningen, når du bruger denne enkle implementering. Jeg viser dig, hvordan du kan ordne det i slutningen.

Android-brugere: Jeg har fundet dette at være den bedste / eneste mulighed. Ved at føje android:windowSoftInputMode="adjustResize"til din AndroidManifest.xml styrer operativsystemet det meste af arbejdet for dig, og KeyboardAvoidingView tager sig af resten. Eksempel på AndroidManifest.xml. Resten af ​​denne artikel gælder sandsynligvis ikke for dig.

Keyboard Aware ScrollView

Den næste mulighed er react-native-keyboard-aware-scroll-view, som giver dig en masse bang for din buck. Bag kulisserne bruger det en ScrollView eller ListView til at håndtere alt (afhængigt af hvilken komponent du vælger), hvilket gør rulleinteraktionen ret sømløs. Den anden store fordel ved denne pakke er, at den ruller til det input, der er i fokus, hvilket giver brugeren en god oplevelse.

Brug er også meget let - du skal bare bytte beholderen ud Viewigen, startende med basiskoden og indstille et par muligheder. Her er koden, så beskriver jeg den.

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;

Først og fremmest vil du indstille baggrundsfarven på ScrollView på den måde (hvis du skulle genaktivere rulle), er baggrunden farve altid den samme. Dernæst vil du fortælle komponenten, hvor standardpositionen er, så når tastaturet er lukket, går det tilbage til det sted - ved at udelade denne prop kan udsigten sidde fast øverst efter at have lukket tastaturet, sådan.

Efter resetScrollToCoords- prop indstiller du contentContainerStyle - dette erstatter i det væsentlige de indeholdende Viewstilarter, du havde før. Den sidste ting, jeg laver, er at deaktivere rullevisningen fra brugerinteraktion. Dette giver måske ikke altid mening for dit brugergrænseflade (f.eks. En grænseflade, hvor en bruger redigerer mange profilfelter), men for denne gør det ikke meget mening at lade brugeren rulle manuelt, fordi der ikke er noget at rulle til.

Ved at kombinere disse rekvisitter får du følgende resultat, hvilket fungerer ret godt.

Tastaturmodul

Dette er langt den mest manuelle mulighed, men giver dig også mest kontrol. Du bruger det animerede bibliotek til at give glatte interaktioner, som du så før.

Tastaturmodulet, som ikke er dokumenteret på React Native-webstedet, giver dig mulighed for at lytte til tastaturhændelser, der udsendes fra enheden. De begivenheder, du bruger, er keyboardWillShow og keyboardWillHide , som returnerer den tid, animationen tager og slutpositionen for tastaturet (blandt andre oplysninger).

Hvis du bruger Android, skal du bruge keyboardDidShow og keyboardDidHide i stedet.

Når keyboardWillShow- begivenheden udsendes, indstiller du en animeret variabel til den endelige højde på tastaturet og får den til at animere i samme varighed som animationen til glidende tastatur. Du bruger derefter denne animerede værdi til at indstille polstring i bunden af ​​containeren for at bumpe alt indholdet op.

Jeg viser kode om et øjeblik, men at gøre det, jeg beskrev ovenfor, efterlader os med denne oplevelse.

Jeg vil rette dette billede denne gang. For at gøre det bruger du en animeret værdi til at styre billedets højde, som du justerer, når tastaturet åbnes. Her er koden.

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;

Der er bestemt meget mere til det end nogen af ​​de andre løsninger. I stedet for en normal, Vieweller Imagedu bruger en Animated.Viewog Animated.Imageså de animerede værdier kan udnyttes. Den sjove del er virkelig i keyboardWillShow og keyboardWillHide- funktioner, hvor de animerede værdier ændrer sig.

Hvad der sker der er, at to animerede værdier ændrer sig parallelt, som derefter bruges til at drive brugergrænsefladen. Det efterlader dig med dette.

Det er en hel del mere kode, men det er ret glat. Du har mange muligheder for, hvad du kan gøre, og kan virkelig tilpasse interaktionen efter dit hjerte.

Kombination af indstillinger

Hvis du vil gemme noget kode, kan du kombinere et par muligheder, hvilket er hvad jeg plejer at gøre. For eksempel ved at kombinere mulighed 1 og 3 behøver du kun bekymre dig om at styre og animere billedets højde.

Koden er ikke meget mindre end kilden til mulighed 3, men da et brugergrænseflade vokser i kompleksitet, kan det hjælpe dig lidt.

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;

Hver implementering har sine fordele og ulemper - du bliver nødt til at vælge den mest passende givet den brugeroplevelse, du sigter efter.

Er du interesseret i at lære mere om at bruge React Native til at oprette mobilapps af høj kvalitet? Tilmeld dig mit gratis React Native-kursus!