当键盘弹出时如何使您的React Native应用正常响应

by Spencer Carli

斯宾塞·卡利(Spencer Carli)

当键盘弹出时如何使您的React Native应用正常响应 (How to make your React Native app respond gracefully when the keyboard pops up)

When you’re working with React Native apps, a common problem is that the keyboard will pop up and hide text inputs when you focus on them. Something like this:

当您使用React Native应用程序时，一个常见的问题是当您专注于输入时，键盘会弹出并隐藏文本输入。 像这样：

There are a few ways you can avoid this. Some are simple, some less so. Some can be customized, others can’t. Today I’ll show you 3 different ways you can avoid the keyboard in React Native.

有几种方法可以避免这种情况。 有些简单，有些则不太简单。 有些可以自定义，有些则不能。 今天，我将向您展示三种避免在React Native中使用键盘的方法。

I’ve put all the source code for this tutorial on Github.

我已经将本教程的所有源代码放在Github上 。

KeyboardAvoidingView (KeyboardAvoidingView)

The most simple solution, and the easiest to install, is KeyboardAvoidingView. It’s a core component but it’s also pretty simple in what it does.

最简单，最容易安装的解决方案是KeyboardAvoidingView 。 它是一个核心组件，但是它的作用也非常简单。

You can take the base code, which has the keyboard covering the inputs, and update that so that the inputs are no longer covered. The first thing you have to do is replace the container View with the KeyboardAvoidingView and then add a behavior prop to it. If you look at the documentation you’ll see that it accepts 3 different values — height, padding, position. I’ve found that padding works in the most predictable manner. So that is what I’ll use.

您可以获取具有覆盖输入的键盘的基本代码 ，并对其进行更新，以便不再覆盖输入。 您要做的第一件事是用KeyboardAvoidingView替换容器View ，然后向其添加一个behavior道具。 如果查看文档，您会发现它接受3个不同的值-height，padding和position 。 我发现填充可以最可预测的方式工作。 这就是我要使用的。

This gives us the following result. It’s not perfect but for barely any work, it’s quite good.

这给我们以下结果。 它不是完美的，但几乎没有任何工作，这是相当不错的。

One thing to note is that on line 30 you’ll see a View that has a height set to 60px. I found that the keyboard avoiding view doesn’t quite work with the last element, and setting padding/margin didn’t work. So I added a new element to “bump” everything up a few pixels.

有一点要注意的是，上线30，你会看到一个View具有高度设置为60像素。 我发现键盘避免视图不适用于最后一个元素，并且设置填充/边距也不起作用。 因此，我添加了一个新元素来使所有物体“碰撞”几个像素。

The image at the top gets pushed out of the view when using this simple implementation. I’ll show you how you can fix that at the end.

使用此简单实现时，顶部的图像会从视图中推出。 最后，我将向您展示如何解决该问题。

Android users: I’ve found this to be the best/only option. By adding android:windowSoftInputMode="adjustResize" to your AndroidManifest.xml the operating system will take care of most of the work for you and the KeyboardAvoidingView will take care of the rest. Example AndroidManifest.xml. The remainder of this article likely won’t apply to you.

Android用户：我发现这是最好/唯一的选择。 通过将android:windowSoftInputMode="adjustResize"到您的AndroidManifest.xml中，操作系统将为您完成大部分工作，而KeyboardAvoidingView将为您完成其余工作。 示例AndroidManifest.xml 。 本文的其余部分可能不适用于您。

键盘感知ScrollView (Keyboard Aware ScrollView)

The next option is the react-native-keyboard-aware-scroll-view which gives you a lot of bang for your buck. Behind the scenes it’s using a ScrollView or ListView to handle everything (depending on the component you choose), which makes the scrolling interaction pretty seamless. The other major benefit to this package is that it will scroll to the input that is in focus, which gives the user a nice experience.

下一个选项是react-native-keyboard-aware-scroll-view ，它为您带来了很多实惠。 在幕后，它使用ScrollView或ListView处理所有内容(取决于您选择的组件)，这使滚动交互变得非常无缝。 此程序包的另一个主要优点是它将滚动到焦点所在的输入，从而为用户带来良好的体验。

Usage is also very easy — you just need to swap out the container View, again starting with the base code, and set a few options. Here’s the code, then I’ll describe it.

用法也很容易-您只需要换出容器View ，再次从基本代码开始 ，并设置一些选项。 这是代码，然后我将对其进行描述。

First off you want to set the backgroundColor of the ScrollView that way (if you were to re-enable scrolling) the backgroundColor is always the same. Next you want to tell the component where the default position is so that, once the keyboard is closed, it goes back to that spot — by omitting this prop the view could get stuck at the top after closing the keyboard, like this.

首先，您要以这种方式(如果要重新启用滚动)设置ScrollView的backgroundColor ，则backgroundColor始终相同。 接下来，您要告诉组件默认位置，以便一旦关闭键盘，它就会回到该位置–通过省略此Struts，可以在关闭键盘后将视图卡在顶部，就像这样。

After the resetScrollToCoords prop you set the contentContainerStyle — this essentially replaces the containing View styles you had before. The final thing I’m doing is disabling the scrollview from user interaction. This may not always make sense for your UI (such as an interface where a user is editing many profile fields) but for this one it does, it doesn’t make much sense to allow the user to manually scroll because there is nothing to scroll to.

在resetScrollToCoords道具之后，您可以设置contentContainerStyle，这实际上将替换您以前拥有的View样式。 我要做的最后一件事是从用户交互中禁用滚动视图。 这对于您的UI(例如，用户正在编辑许多配置文件字段的界面)可能并不总是有意义，但是对于此用户界面而言，允许用户手动滚动并没有多大意义，因为没有滚动内容至。

Combining these props together you get the following result, which works quite well.

将这些道具组合在一起可获得以下结果，效果很好。

键盘模块 (Keyboard Module)

This is by far the most manual option but also gives you the most control. You’ll be using the Animated library to help give smooth interactions like you saw before.

到目前为止，这是最手动的选项，但也可以为您提供最多的控制。 您将使用Animated库来像以前看到的那样进行平滑的交互。

The Keyboard module, which isn’t documented on the React Native site, allows you to listen keyboard events emitted from the device. The events you’ll use are keyboardWillShow and keyboardWillHide, which return the length of time the animation will take and the ending position of the keyboard (among other information).

在React Native网站上没有记录的Keyboard模块，允许您监听从设备发出的键盘事件。 您将使用的事件是keyboardWillShow和keyboardWillHide ，它们返回动画将花费的时间长度和键盘的结束位置(以及其他信息)。

If you’re on Android you’ll want to use keyboardDidShow and keyboardDidHide instead.

如果您使用的是Android，则应改用keyboardDidShow和keyboardDidHide。

When the keyboardWillShow event is emitted you’ll set an animated variable to the final height of the keyboard and have it animate for the same duration as the keyboard sliding animation. You then use this animated value to set padding on the bottom of the container to bump all of the content up.

发出keyboardWillShow事件时，将一个动画变量设置为键盘的最终高度，并使其动画与键盘滑动动画的持续时间相同。 然后，您可以使用此动画值在容器底部设置填充，以使所有内容都向上填充。

I’ll show code in a moment, but doing what I described above leaves us with this experience.

稍后我将显示代码，但是按照我上面描述的方式进行操作会使我们拥有这种经验。

I want to fix that image this time. To do so you’ll use an animated value to manage the height of the image, which you’ll adjust when the keyboard is opened. Here’s the code.

我这次要修复该图像。 为此，您将使用动画值来管理图像的高度，您可以在打开键盘时对其进行调整。 这是代码。

There’s certainly a lot more to it than any of the other solutions. Rather than a normal View or Image you’re using an Animated.View and Animated.Image so that the animated values can be leveraged. The fun part is really in the keyboardWillShow and keyboardWillHide functions where the animated values are changing.

当然，它比其他任何解决方案都具有更多的优势。 而不是普通的View或Image而是使用Animated.View和Animated.Image以便可以利用动画值。 有趣的部分实际上是在更改动画值的keyboardWillShow和keyboardWillHide函数中。

What’s happening there is that two animated values are changing in parallel which are then being used to drive the UI. That leaves you with this.

发生的情况是两个动画值正在并行更改，然后用于驱动UI。 剩下的就是这个。

It’s a fair amount more code but it’s pretty slick. You have a lot of options for what you can do and can really customize the interaction to your hearts content.

这是相当多的代码，但是非常漂亮。 您可以做很多事情，并且可以根据您的内心需求真正定制交互。

组合选项 (Combining Options)

If you want to save some code you can combine a few options, which is what I tend to do. For example by combining option 1 and 3 you only have to worry about managing and animating the height of the image.

如果您想保存一些代码，则可以组合一些选项，这是我倾向于这样做的。 例如，通过组合选项1和3，您只需要担心管理和设置图像高度的动画。

The code isn’t much less than the source of option 3 but as a UI grows in complexity it can help you out a bit.

该代码与选项3的源代码并不少，但是随着UI复杂性的提高，它可以为您提供一些帮助。

Each implementation has its pros and cons — you’ll have to choose the most appropriate one given the user experience you’re aiming for.

每种实现都有其优缺点-根据您想要的用户体验，您必须选择最合适的一种。

Are you interested in learning more about using React Native to build high quality mobile apps? Sign up for my free React Native course!

您是否有兴趣了解更多有关使用React Native来构建高质量移动应用程序的信息？ 报名参加我的免费React Native课程 ！

翻译自: https://www.freecodecamp.org/news/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580/