Как да накарате вашето приложение React Native да реагира грациозно, когато се появи клавиатурата

Когато работите с приложения на React Native, често срещаният проблем е, че клавиатурата ще се появи и ще скрие въвеждането на текст, когато се фокусирате върху тях. Нещо като това:

Има няколко начина да избегнете това. Някои са прости, други по-малко. Някои могат да бъдат персонализирани, други не. Днес ще ви покажа 3 различни начина, по които можете да избегнете клавиатурата в React Native.

Поставих целия изходен код за този урок на Github.

KeyboardAvoidingView

Най-простото решение и най-лесното за инсталиране е KeyboardAvoidingView. Това е основен компонент, но също така е доста прост в това, което прави.

Можете да вземете основния код, който има клавиатурата, покриваща входовете, и да го актуализирате, така че входовете вече не са покрити. Първото нещо, което трябва да направите, е да замените контейнера Viewс KeyboardAvoidingViewи след това да добавите behaviorподпора към него. Ако погледнете документацията, ще видите, че тя приема 3 различни стойности - височина, подложка, позиция . Открих, че подложката работи по най-предвидимия начин. Така че това е, което ще използвам.

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;

Това ни дава следния резултат. Не е перфектен, но за почти никаква работа е доста добър.

Едно нещо, което трябва да се отбележи е, че на ред 30 ще видите такъв, Viewкойто има височина, зададена на 60px. Установих, че изгледът за избягване на клавиатурата не работи съвсем с последния елемент и настройката за подплънки / полета не работи. Затова добавих нов елемент, за да „извадя“ всичко с няколко пиксела.

Изображението в горната част се изтласква от погледа, когато използвате тази проста реализация. Ще ви покажа как можете да поправите това в края.

Потребители на Android: Открих, че това е най-добрата / единствена опция. Чрез добавяне android:windowSoftInputMode="adjustResize"към вашия AndroidManifest.xml операционната система ще се погрижи за по-голямата част от работата вместо вас, а KeyboardAvoidingView ще се погрижи за останалото. Пример AndroidManifest.xml. Останалата част от тази статия вероятно няма да се отнася за вас.

ScrollView с разбиране за клавиатурата

Следващата опция е реакцията-родна-клавиатура-наясно-превъртане-изглед, който ви дава много гръм и трясък за парите си. Зад кулисите той използва ScrollView или ListView за обработка на всичко (в зависимост от избрания от вас компонент), което прави взаимодействието при превъртане доста безпроблемно. Другото голямо предимство на този пакет е, че той ще премине към входа, който е на фокус, което дава на потребителя приятно изживяване.

Използването също е много лесно - просто трябва да смените контейнера View, като отново започнете с основния код, и да зададете няколко опции. Ето кода, тогава ще го опиша.

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;

Първо искате да зададете backgroundColor на ScrollView по този начин (ако трябва да активирате повторно превъртането) backgroundColor винаги е един и същ. След това искате да кажете на компонента къде е позицията по подразбиране, така че след като клавиатурата е затворена, тя да се върне на това място - като пропуснете тази опора, изгледът може да заседне отгоре след затваряне на клавиатурата, като този.

След поддръжката resetScrollToCoords задавате contentContainerStyle - това по същество замества съдържащите Viewстилове, които сте имали преди. Последното нещо, което правя, е да деактивирам scrollview от потребителско взаимодействие. Това не винаги може да има смисъл за вашия потребителски интерфейс (като интерфейс, където потребителят редактира много полета на профила), но за този, който има, няма много смисъл да позволявате на потребителя да превърта ръчно, защото няма какво да превърта да се.

Комбинирането на тези реквизити заедно получава следния резултат, който работи доста добре.

Модул за клавиатура

Това е най-ръчната опция, но ви дава и най-голям контрол. Ще използвате анимираната библиотека, за да ви помогне да осигурите гладки взаимодействия, както сте виждали преди.

Модулът Клавиатура, който не е документиран на сайта React Native, ви позволява да слушате събития от клавиатурата, излъчвани от устройството. Събитията, които ще използвате, са keyboardWillShow и keyboardWillHide , които връщат продължителността на времето, което ще отнеме анимацията, и крайната позиция на клавиатурата (наред с друга информация).

Ако сте на Android, вместо това ще искате да използвате keyboardDidShow и keyboardDidHide.

Когато се излъчи събитие keyboardWillShow , ще зададете анимирана променлива на крайната височина на клавиатурата и ще я анимирате за същата продължителност като плъзгащата се анимация на клавиатурата. След това използвате тази анимирана стойност, за да зададете подложка в долната част на контейнера, за да извадите цялото съдържание нагоре.

Ще покажа код след малко, но извършването на описаното по-горе ни оставя това преживяване.

Този път искам да поправя това изображение. За целта ще използвате анимирана стойност, за да управлявате височината на изображението, която ще коригирате при отваряне на клавиатурата. Ето кода.

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;

Със сигурност има много повече от което и да е от другите решения. Вместо нормално Viewили Imageизползвате а Animated.Viewи Animated.Imageтака, че анимираните стойности могат да бъдат използвани. Забавната част наистина е във функциите keyboardWillShow и keyboardWillHide, където анимираните стойности се променят.

Това, което се случва там е, че две анимирани стойности се променят паралелно, които след това се използват за задвижване на потребителския интерфейс. Това ви оставя с това.

Това е доста повече код, но е доста хлъзгав. Имате много възможности за това, което можете да направите и наистина можете да персонализирате взаимодействието според съдържанието на вашите сърца.

Комбиниране на опции

Ако искате да запазите някакъв код, можете да комбинирате няколко опции, което е това, което съм склонен да правя. Например чрез комбиниране на опции 1 и 3 трябва да се притеснявате само за управление и анимиране на височината на изображението.

Кодът не е много по-малък от източника на опция 3, но тъй като потребителският интерфейс се усложнява, той може да ви помогне малко.

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;

Всяко внедряване има своите плюсове и минуси - ще трябва да изберете най-подходящото, като се има предвид потребителското изживяване, към което се стремите.

Интересувате ли се да научите повече за използването на React Native за създаване на висококачествени мобилни приложения? Регистрирайте се за моя безплатен курс React Native!