Expo react-native 问题与键盘覆盖输入 [英] 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.

我知道名为 Kitchen Sink 的 Native-Base 演示应用程序中有表单，因此我查看了它并发现 Google Play 商店运行良好.但是，当我查看应用程序的 expo 版本 时，我发现永久地址"表单"视图上的字段被键盘覆盖，同时它平滑地滚动到应用程序的 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?

expo有通用解决方案键盘覆盖吗?

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 react-native 问题与键盘覆盖输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！