npm 包 react-native-keyboard-avoiding-view 使用教程及学习指导.
如果你在开发 React Native 时遇到了键盘弹起后挡住输入框的问题，那么可以使用 npm 包 react-native-keyboard-avoiding-view 来解决这个问题。它可以使输入框自动上移，让用户看到正在输入的内容，并且不会被键盘遮挡。
安装方法
npm 包 react-native-keyboard-avoiding-view 可以直接安装到你的项目中。
使用 npm 命令：
--- ------- ----------------------------------- ------
使用 yarn 命令：
---- --- -----------------------------------
使用方法
在需要使用键盘避让的地方引入 react-native-keyboard-avoiding-view 包，并使用 KeyboardAvoidingView 组件来包裹你的 JSX(或 react 组件)。
------ ------ - --------- - ---- --------
------ - ----------- --------------------- --------- - ---- ---------------
------ ------- ----- --------------------------- ------- --------- -
-------- -
------ -
--------------------- ------------------------ ------------------ --------
---------- -------------------- --
-----------------------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------ -
------- ---
------ ------
------------ -------
------------ --
--------------- ---
------------------ ---
-
---在上面的例子中，KeyboardAvoidingView 组件包含了一个 TextInput 组件。当键盘弹起时，KeyboardAvoidingView 组件会自动向上移动，TextInput 组件则会显示在键盘上方。behavior 属性指定了键盘弹起时屏幕向上移动的方式，这里我们使用了 padding 方式，这种方式会使屏幕的底部内边距增加键盘的高度，以避免遮挡输入框。
除了 padding 方式之外，还有 position 和 height 两种方式，分别是使用定位方式和改变屏幕高度的方式向上移动屏幕。当输入框不在屏幕中央时，position 方式可能会导致输入框向上移动后被遮挡，需要使用 ScrollView 等滚动组件。
当然，这只是一个最简单的例子，关于 react-native-keyboard-avoiding-view 组件以及它的属性还有很多，需要开发者自行了解，详细的说明文档可以在 npm 包的主页中找到。
深入理解
react-native-keyboard-avoiding-view 组件使用的实现原理其实很简单。当键盘被展示时，键盘的高度会影响屏幕的显示，从而导致界面被遮挡。而 react-native-keyboard-avoiding-view 组件的目的就是在键盘弹起时，能够自动向上滚动内容以避免被遮盖，并且保持输入框在视野内。
具体实现细节可以看一下源码，这里重点说一下要点。
监控键盘的展开与收起
react-native 的原生模块提供了 Keyboard 模块用于监控键盘的展开与收起。react-native-keyboard-avoiding-view 组件通过监听键盘的展开与收起事件，以及对比键盘弹起后的高度与视图的高度，来判断是否需要向上移动界面。
-------------------- - ------------------------ - ---------------------------------------- ----------------------- ------------------------ - ---------------------------------------- ----------------------- - ---------------------- - ---------------------------------- ---------------------------------- - ---------------- - ------- -- ----- ---------------- - -- -- -----
键盘的位置尺寸信息存储在 Keyboard 的 event 对象中，可以获取到键盘的高度，从而计算界面的偏移量。
----- --------------------- - ---------------------------------------- -- ------------------------ - ------- - ---------------------------------------- ----------- ---------- ------ ------- ------ ------ -- - ----- ------------- - ----- - ------- ----- --- - -------------- - ---------------------- - ------------ - ------------- - ------- ---
其中，currentlyFocusedField() 表示当前输入框获取了焦点的组件，measure() 方法在被测量的组件render之后执行。最终，计算出在输入框上部出现的空隙(gap)后，通过调用 ScrollView 等组件滚动相应的距离。
详细配置
除了 behavior 属性以外，KeyboardAvoidingView 还支持其他一些属性：
- contentContainerStyle：内部 ScrollView 的样式，可以设置 scrollViewMargins 让 ScrollView 与容器保持一定的间隔。
- keyboardVerticalOffset：在跟随键盘移动时增加或减少的偏移量。
- enabled：是否启用键盘避让。
通过详细的配置可以自定义键盘弹起时界面自动上移的方式，这个可以根据具体的应用场景来设置。也可以通过监听键盘的事件来手动处理需要自动滚动的组件，实现更加复杂的效果。
总结
React Native 是一个快速开发高性能原生应用的框架，但是也存在一些困扰开发者的问题。例如键盘弹起后挡住输入框就是一个很常见的问题。总的来说，react-native-keyboard-avoiding-view 对于这个问题的解决很实用，参照上述使用方法可以简单快捷地进行配置，并且还提供了很多优秀的自定义方法，可以帮助开发者解决更具有挑战性的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600553b381e8991b448d0f3c