de Spencer Carli

Cum să faci ca aplicația ta React Native să răspundă cu grație când apare tastatura

Când lucrați cu aplicațiile React Native, o problemă obișnuită este că tastatura va apărea și va ascunde intrările de text atunci când vă concentrați asupra lor. Ceva de genul:

Există câteva modalități prin care puteți evita acest lucru. Unele sunt simple, altele mai puțin. Unele pot fi personalizate, altele nu. Astăzi vă voi arăta 3 moduri diferite de a evita tastatura în React Native.

Am pus tot codul sursă pentru acest tutorial pe Github.

KeyboardAvoidingView

Cea mai simplă soluție și cea mai ușor de instalat este KeyboardAvoidingView. Este o componentă de bază, dar este, de asemenea, destul de simplă în ceea ce face.

Puteți lua cod de bază, care are tastatura care acoperă intrările și o actualizează astfel încât intrările să nu mai fie acoperite. Primul lucru pe care trebuie să-l faci este să înlocuiești recipientul View cu KeyboardAvoidingView și apoi adăugați un behavior sprijină-o. Dacă vă uitați la documentație, veți vedea că acceptă 3 valori diferite – înălțime, căptușeală, poziție. Am găsit asta căptușeală funcționează în modul cel mai previzibil. Deci asta voi folosi.

import React from 'react';
import { View, TextInput, Image, KeyboardAvoidingView } from 'react-native';
import styles from './styles';
import logo from './logo.png';

const Demo = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
    >
      <Image source={logo} style={styles.logo} />
      <TextInput
        placeholder="Email"
        style={styles.input}
      />
      <TextInput
        placeholder="Username"
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        style={styles.input}
      />
      <TextInput
        placeholder="Confirm Password"
        style={styles.input}
      />
      <View style={{ height: 60 }} />
    </KeyboardAvoidingView>
  );
};

export default Demo;

Acest lucru ne oferă următorul rezultat. Nu este perfect, dar pentru abia orice lucru, este destul de bun.

Un lucru de reținut este că pe linia 30 veți vedea un View care are o înălțime setată la 60 px. Am constatat că tastatura care evită vizualizarea nu funcționează prea bine cu ultimul element, iar setarea padding / margin nu a funcționat. Așa că am adăugat un element nou pentru a „împiedica” totul cu câțiva pixeli.

Imaginea din partea de sus este împinsă din vizualizare atunci când utilizați această implementare simplă. Vă voi arăta cum puteți remedia asta la final.

Utilizatori Android: am găsit că aceasta este cea mai bună / singură opțiune. Prin adăugarea android:windowSoftInputMode="adjustResize" pe AndroidManifest.xml sistemul dvs. de operare se va ocupa de cea mai mare parte a lucrului pentru dvs., iar KeyboardAvoidingView se va ocupa de restul. Exemplu AndroidManifest.xml. Este probabil ca restul acestui articol să nu se aplice pentru dvs.

Tastatură conștientă ScrollView

Următoarea opțiune este react-native-keyboard-aware-scroll-view ceea ce îți dă o mulțime de bang pentru dolarul tău. În culise, folosește un ScrollView sau ListView pentru a gestiona totul (în funcție de componenta pe care o alegi), ceea ce face ca interacțiunea de defilare să fie destul de uniformă. Celălalt beneficiu major al acestui pachet este că va derula până la intrarea care este focalizată, ceea ce oferă utilizatorului o experiență plăcută.

Utilizarea este, de asemenea, foarte ușoară – trebuie doar să schimbați containerul View, din nou începând cu cod de bazăși setați câteva opțiuni. Iată codul, apoi îl voi descrie.

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 (
    <KeyboardAwareScrollView
      style={{ backgroundColor: '#4c69a5' }}
      resetScrollToCoords={{ x: 0, y: 0 }}
      contentContainerStyle={styles.container}
      scrollEnabled={false}
    >
        <Image source={logo} style={styles.logo} />
        <TextInput
          placeholder="Email"
          style={styles.input}
        />
        <TextInput
          placeholder="Username"
          style={styles.input}
        />
        <TextInput
          placeholder="Password"
          style={styles.input}
        />
        <TextInput
          placeholder="Confirm Password"
          style={styles.input}
        />
    </KeyboardAwareScrollView>
  );
};

export default Demo;

Mai întâi doriți să setați culoare de fundal din ScrollView în acest fel (dacă ați activa din nou defilarea) backgroundColor este întotdeauna același. Apoi, doriți să spuneți componentei unde este poziția implicită, astfel încât, odată ce tastatura este închisă, aceasta să revină la locul respectiv – prin omiterea acestui suport, vizualizarea s-ar putea bloca în partea de sus după închiderea tastaturii, astfel.

După resetScrollToCoords prop ai setat contentContainerStyle – acest lucru înlocuiește în esență conținutul View stiluri pe care le-ai avut înainte. Ultimul lucru pe care îl fac este dezactivarea vizualizării scroll din interacțiunea utilizatorului. Poate că acest lucru nu are întotdeauna sens pentru interfața dvs. de utilizare (cum ar fi o interfață în care un utilizator editează mai multe câmpuri de profil), dar pentru aceasta, nu are prea mult sens să permiteți utilizatorului să deruleze manual, deoarece nu este nimic de derulat la.

Combinând aceste elemente de recuzită, veți obține următorul rezultat, care funcționează destul de bine.

Modulul tastaturii

Aceasta este de departe cea mai manuală opțiune, dar vă oferă și cel mai mare control. Veți folosi biblioteca animată pentru a vă oferi interacțiuni fluide așa cum ați văzut înainte.

Modulul Tastatură, care nu este documentat pe site-ul React Native, vă permite să ascultați evenimentele de pe tastatură emise de pe dispozitiv. Evenimentele pe care le veți folosi sunt keyboardWillShow și tastaturăAscunde, care returnează durata de timp pe care o va dura animația și poziția finală a tastaturii (printre alte informații).

Dacă sunteți pe Android, veți dori să utilizați în schimb keyboardDidShow și keyboardDidHide.

Cand keyboardWillShow dacă este emis un eveniment, veți seta o variabilă animată la înălțimea finală a tastaturii și o veți anima pentru aceeași durată ca animația glisantă a tastaturii. Apoi utilizați această valoare animată pentru a seta umplerea în partea de jos a containerului pentru a elimina tot conținutul.

Voi arăta codul într-o clipă, dar a face ceea ce am descris mai sus ne lasă această experiență.

Vreau să repar această imagine de data aceasta. Pentru a face acest lucru, veți utiliza o valoare animată pentru a gestiona înălțimea imaginii, pe care o veți regla la deschiderea tastaturii. Iată codul.

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 (
      <Animated.View style={[styles.container, { paddingBottom: this.keyboardHeight }]}>
        <Animated.Image source={logo} style={[styles.logo, { height: this.imageHeight }]} />
        <TextInput
          placeholder="Email"
          style={styles.input}
        />
        <TextInput
          placeholder="Username"
          style={styles.input}
        />
        <TextInput
          placeholder="Password"
          style={styles.input}
        />
        <TextInput
          placeholder="Confirm Password"
          style={styles.input}
        />
      </Animated.View>
    );
  }
};

export default Demo;

Există cu siguranță mult mai mult decât oricare dintre celelalte soluții. Mai degrabă decât un normal View sau Image folosiți un Animated.View și Animated.Image astfel încât valorile animate să poată fi valorificate. Partea distractivă este cu adevărat în keyboardWillShow și tastaturăAscunde funcții în care valorile animate se schimbă.

Ce se întâmplă acolo este că două valori animate se schimbă în paralel, care sunt apoi utilizate pentru a conduce interfața de utilizare. Asta te lasă cu asta.

Este o cantitate destul de mare de cod, dar este destul de slick. Aveți o mulțime de opțiuni pentru ceea ce puteți face și puteți personaliza cu adevărat interacțiunea după conținutul inimii voastre.

Combinarea opțiunilor

Dacă doriți să salvați un anumit cod, puteți combina câteva opțiuni, ceea ce tind să fac. De exemplu, combinând opțiunile 1 și 3, trebuie doar să vă faceți griji cu privire la gestionarea și animarea înălțimii imaginii.

Codul nu este mult mai mic decât sursa opțiunii 3, dar pe măsură ce o UI crește în complexitate, vă poate ajuta un pic.

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 (
      <KeyboardAvoidingView
        style={styles.container}
        behavior="padding"
      >
          <Animated.Image source={logo} style={[styles.logo, { height: this.imageHeight }]} />
          <TextInput
            placeholder="Email"
            style={styles.input}
          />
          <TextInput
            placeholder="Username"
            style={styles.input}
          />
          <TextInput
            placeholder="Password"
            style={styles.input}
          />
          <TextInput
            placeholder="Confirm Password"
            style={styles.input}
          />
      </KeyboardAvoidingView>
    );
  }
};

export default Demo;

Fiecare implementare are avantajele și dezavantajele sale – va trebui să o alegeți pe cea mai potrivită, având în vedere experiența utilizatorului pe care îl vizați.

Sunteți interesat să aflați mai multe despre utilizarea React Native pentru a crea aplicații mobile de înaltă calitate? Înscrieți-vă pentru cursul meu gratuit React Native!