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

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

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

Сложих целия изходен код за този урок на Github.

KeyboardAvoidingView

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

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

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

Едно трябва да се отбележи, че на линия 30 ще видите изглед с височина, зададена на 60 пиксела. Открих, че клавиатурата, избягваща изгледа, не работи точно с последния елемент и настройката на подплънката / полето не работи. Така че добавих нов елемент, за да "прехвърля" всичко до няколко пиксела.

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

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

Клавиатура Aware ScrollView

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

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

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

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

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

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

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

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

Ако сте на Android, вместо това ще искате да използвате клавиатуратаDidShow и клавиатуратаDidHide.

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

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

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

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

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

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

Опции за комбиниране

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

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

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

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