React Native: 键盘弹出后更新应用程序布局

Question

我现在正在解决一个常见的问题，即键盘将应用程序推出视图。

android:windowSoftInputMode="adjustResize"设置无效。

现在我手动调整视图大小以适应键盘，如下所示:

keyboardWillShow(e) {
    setTimeout(()=> {
        this.keyboardOffset = e.endCoordinates.height;
    }, 500)
}

keyboardWillHide(e) {
    this.keyboardOffset = 0;
}

///...

const resultingHeight = windowHeight - this.keyboardOffset - Navigator.NavigationBar.Styles.General.TotalNavHeight;

viewStyle = {
   height: resultingHeight
};

这个基本可以用。但我的问题是应用被推到了视图之外，然后keyboardWillShow被激发并正确地调整了视图大小，然后就再也没有变化了。Android在键盘显示后不会更新布局。

编辑：其他 Stack Overflow 上的帖子没有帮助，因为 adjustResize 设置不起作用，而我使用的是 React Native 而不是原生 Android。

- Michael Malura

---

这不是重复的。我尝试了同样的方法，但在AndroidManifest中使用任何windowSoftInputMode都没有解决它。当我使用android:windowSoftInputMode="adjustNothing"时，视图不会消失，但是键盘会覆盖textInput上的文本，仍然存在相同的问题... - BigPun86

如果您能发布该视图的XML布局，我可以尝试提供帮助（抱歉，我对React-Native一无所知）。 - Hugo

android:windowSoftInputMode="adjustResize"是什么意思呢？啊，你已经尝试过了。那么你的xml根布局可能有错误的属性。如果你使用了RelativeLayout，请设置如下的代码： android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" >``` - longi

@longilong 我没有描述布局的 XML 文件。这是 React Native。 - Michael Malura

抱歉打扰了，之前从未听说过这个框架。 - longi

Answer 1

如果我没记错的话，keyboardwillShow 和 keyboardWillHide 在 Android 上不会触发。

这种行为应该是 Android 原生的，你尝试将 windowSoftInputMode 设置如下，不需要监听这些事件吗？

android:windowSoftInputMode="adjustPan"

如果这对你不起作用，你可以看一下KeyboardAvoidingView，它是新版本0.34中的一个组件。它似乎解决了你想要实现的问题。

这是一个组件，用于解决视图需要避开虚拟键盘的常见问题。它可以根据键盘的位置自动调整其位置或底部填充。

KeyboardAvoidingView文档

- BradByte

---

我尝试了KeyboardAvoidingView。它基本上是一个可行的解决方案。我移除了windowSoftInputMode，并且对该视图使用了"height"属性进行调整。只剩下一个问题了。当键盘关闭时，视图不再能够自动恢复到完整大小。 - Michael Malura

你可以在这种情况下使用 keyboardDidClose 并手动更改高度吗？ - BradByte

没问题，但我们仍在苦苦寻求可靠的解决方案 - 您能否使用React Native构建一个行为符合“预期”的Android应用程序？ - Thomas Kekeisen

Answer 2

KeyboardAvoidingView 的表现比我预期的要差，所以我用 ScrollView 创建了自己的解决方案，它包裹了整个应用程序（高度通过 Dimensions 设置），然后在任何输入点击时 - 根据输入的位置（屏幕的下半部分/上半部分 - 通过 UIManager.measure 和 TextInputState.currentlyFocusedField）滚动视图或不滚动 - 这对你有用吗？（将视图调整为较小的高度在许多情况下不起作用（看起来不好））- 我可以提供一些代码

- Marcin Pietruszka

---

主要问题是整个应用程序被推出了视图空间。这不是滚动到文本输入的问题。 - Michael Malura

这非常有趣，你能分享一下你编写的代码吗？ - Noitidart