键盘覆盖输入时，Expo本机故障 [英] Expo react-native trouble with keyboard covering input

问题描述

当我在Android上的 expo 中运行应用程序时，键盘无法覆盖视图中的输入字段设备(我没有要测试的iOS设备).

I am having trouble with the keyboard covering input fields in my views when I run my app in expo on my android device (I do not have an iOS device to test on).

我已经尝试了react-native的KeyboardAvoidingView和第三方的react-native-keyboard-aware-scroll-view，但是都没有任何解决问题的方法.

I have tried the react-native KeyboardAvoidingView and the third-party react-native-keyboard-aware-scroll-view but neither did anything to fix the problem.

我知道名为厨房水槽"的Native-Base演示应用程序中包含表单，因此我对其进行了查看，发现展览版本时，我发现永久地址"键盘上会覆盖表单"视图上的字段"，同时它会平滑滚动到该应用的Google Play版本的视图中.

I knew that the Native-Base demo app, which is called Kitchen Sink, had forms in it so I looked at it and found that the version from the Google Play store worked fine. However, when I viewed the expo version of the app I found that the 'Permanent Address' field on the 'Form' view gets covered by the keyboard, while it smoothly scrolls into view on the Google Play version of the app.

有人知道为什么博览会版本不能正常工作吗?有人知道expo是否通常在覆盖输入字段的键盘上苦苦挣扎吗?

Does anybody know why the expo version does not work properly? Does anybody know if expo generally struggles with keyboards covering input fields?

博览会上有通用的键盘解决方案吗?

Is there a general solution keyboard covering in expo?

推荐答案

我将NativeBase Kitchen Sink应用程序更改为具有以下配置.同一件事适用于任何Expo应用程序:

I changed the NativeBase Kitchen Sink app to have the following configuration. The same thing applies on any Expo app:

"expo": {
  "name": "NativeBase Kitchen Sink",
  "description": "Example of NativeBase components",
  "slug": "native-base-kitchen-sink",
  "version": "1.0.0",
  "sdkVersion": "18.0.0",
  "androidStatusBar": {
    "backgroundColor": "#000000"
  }
}

关键部分是设置了"backgroundColor"的"androidStatusBar".这将使应用的布局随着键盘的出现而自动调整.

The key part is "androidStatusBar" with the "backgroundColor" set. This will make the layout of the app automatically adjust as the keyboard appears.

您可以在以下网址尝试使用它: https://exp.host/@community/native-base-kitchen-sink -转到堆叠标签"示例.您可以在 https://github.com上查看源代码并尝试运行与Create React Native App一起运行的演示. /brentvatne/StackOverflow44876951

You can try it at: https://exp.host/@community/native-base-kitchen-sink -- go to the "Stacked Label" example. You can see the source for it and try the demo, running with Create React Native App, at https://github.com/brentvatne/StackOverflow44876951

这篇关于键盘覆盖输入时，Expo本机故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！