Jak přimět aplikaci React Native, aby reagovala elegantně, když se objeví klávesnice

Při práci s aplikacemi React Native je běžným problémem to, že klávesnice se při zaměření na vyskakovací okna skryje a skrývá. Něco takového:

Existuje několik způsobů, jak se tomu vyhnout. Některé jsou jednoduché, jiné méně. Některé lze přizpůsobit, jiné ne. Dnes vám ukážu 3 různé způsoby, jak se vyhnout klávesnici v React Native.

Do Githubu jsem vložil veškerý zdrojový kód pro tento tutoriál.

KeyboardAventioningView

Nejjednodušším řešením a nejjednodušší instalací je KeyboardAventioningView. Je to základní součást, ale v tom, co dělá, je také docela jednoduchá.

Můžete vzít základní kód, který má klávesnici zakrývající vstupy, a aktualizovat tak, aby vstupy již nebyly pokryty. První věc, kterou musíte udělat, je nahradit zobrazení kontejneru klávesnicí KeyboardAventioningView a poté do něj přidat podporu chování. Když se podíváte na dokumentaci, uvidíte, že přijímá 3 různé hodnoty - výška, výplň, poloha. Zjistil jsem, že čalounění funguje nejpředvídatelnějším způsobem. To je to, co budu používat.

To nám dává následující výsledek. Není to dokonalé, ale pro téměř žádnou práci je to docela dobré.

Jedna věc, kterou si všimněte, je, že na řádku 30 uvidíte pohled, který má výšku nastavenou na 60 pixelů. Zjistil jsem, že zobrazení, které se vyhýbalo klávesnici, nefunguje úplně s posledním prvkem a nastavení odsazení / okraje nefunguje. Přidal jsem tedy nový prvek, který „odrazil“ vše o několik pixelů.

Při použití této jednoduché implementace se obraz nahoře vytlačí z pohledu. Nakonec vám ukážu, jak to napravit.

Uživatelé systému Android: Zjistil jsem, že je to nejlepší / jediná možnost. Přidáním android: windowSoftInputMode = "adjustResize" do vašeho AndroidManifest.xml se operační systém postará o většinu práce za vás a KeyboardAventioningView se postará o zbytek. Příklad AndroidManifest.xml. Zbytek tohoto článku se na vás pravděpodobně nebude vztahovat.

Klávesnice Aware ScrollView

Další možností je zobrazení reagující-nativní-klávesnice-vědomé-posouvání-zobrazení, které vám dává spoustu peněz za vaši babku. V zákulisí používá ScrollView nebo ListView ke zpracování všeho (v závislosti na zvolené komponentě), díky čemuž je vzájemná interakce posouvání docela plynulá. Další hlavní výhoda tohoto balíčku je v tom, že přejde na vstup, který je v centru pozornosti, což dává uživateli příjemný zážitek.

Použití je také velmi snadné - stačí vyměnit zobrazení kontejneru, znovu od základního kódu a nastavit několik možností. Tady je kód, pak to popíšu.

Nejprve si přejete nastavit BackgroundColor ScrollView tímto způsobem (pokud byste měli znovu povolit rolování), backgroundColor je vždy stejný. Dále chcete komponentě říct, kde je výchozí pozice tak, že jakmile je klávesnice zavřená, přejde zpět na toto místo - vynecháním této podpěry by se pohled mohl po zavření klávesnice uvíznout v horní části.

Po propu resetScrollToCoords nastavíte contentContainerStyle - toto v podstatě nahradí obsahující styly pohledu, které jste měli dříve. Poslední věc, kterou dělám, je deaktivace scrollview z interakce s uživatelem. To nemusí mít vždy smysl pro vaše uživatelské rozhraní (jako je rozhraní, kde uživatel edituje mnoho polí profilu), ale pro toto to nemá smysl dávat uživateli možnost manuálního posouvání, protože není nic k posouvání na.

Spojením těchto rekvizit získáte následující výsledek, který funguje docela dobře.

Modul klávesnice

Toto je zdaleka nejvíce manuální možnost, ale také vám dává největší kontrolu. Knihovnu Animated budete používat k tomu, abyste poskytli hladké interakce, jaké jste viděli dříve.

Modul Klávesnice, který není zdokumentován na webu React Native, umožňuje poslouchat události klávesnice emitované ze zařízení. Události, které budete používat, jsou keyboardWillShow a keyboardWillHide, které vracejí dobu trvání animace a konečnou polohu klávesnice (mimo jiné informace).

Pokud používáte Android, budete chtít místo toho použít keyboardDidShow a keyboardDidHide.

Když je spuštěna událost keyboardWillShow, nastavíte animovanou proměnnou na konečnou výšku klávesnice a necháte ji animovat po stejnou dobu jako animace posuvné klávesnice. Tuto animovanou hodnotu pak použijete k nastavení výplně na spodní straně kontejneru, abyste mohli narovnat veškerý obsah nahoru.

Za chvíli ukážu kód, ale dělat to, co jsem popsal výše, nám tuto zkušenost ponechává.

Tentokrát chci opravit ten obrázek. K tomu použijete animovanou hodnotu pro správu výšky obrázku, kterou upravíte při otevření klávesnice. Tady je kód.

Určitě je toho mnohem víc, než jakékoli jiné řešení. Spíše než normální zobrazení nebo obrázek, který používáte Animated.View a Animated.Image, abyste mohli animované hodnoty využít. Zábavná část je opravdu ve funkcích keyboardWillShow a keyboardWillHide, kde se animované hodnoty mění.

Stává se, že se paralelně mění dvě animované hodnoty, které se pak používají k ovládání uživatelského rozhraní. To vám dává toto.

Je to slušnější částka více kódu, ale je to docela úhledné. Máte mnoho možností pro to, co můžete udělat, a můžete skutečně přizpůsobit interakci obsahu vašich srdcí.

Možnosti kombinace

Pokud chcete uložit nějaký kód, můžete zkombinovat několik možností, což je to, co mám tendenci dělat. Například kombinací možností 1 a 3 se musíte starat pouze o správu a animaci výšky obrázku.

Kód není o nic menší než zdroj možnosti 3, ale jak se uživatelské rozhraní rozrůstá ve složitosti, může vám to trochu pomoci.

Každá implementace má své klady a zápory - budete muset vybrat tu nejvhodnější, vzhledem k uživatelské zkušenosti, kterou chcete.

Máte zájem dozvědět se více o tom, jak React Native používat k vytváření vysoce kvalitních mobilních aplikací? Zaregistrujte se na můj bezplatný kurz React Native!