如何防止键盘显示时由于“justify-content：center”导致状态栏重叠？答案

【问题标题】：How to prevent status bar overlap due to "justify-content: center" when keyboard shows?如何防止键盘显示时由于“justify-content：center”导致状态栏重叠？
【发布时间】：2020-06-14 01:39:34
【问题描述】：

我用justifyContent: center将屏幕的所有内容垂直居中。
当我在该屏幕上集中输入并显示键盘时，即使我使用的是SafeAreaView，顶部内容也会与状态栏重叠。
如何防止这种重叠？我希望状态栏覆盖内容。

我尝试了什么：

向屏幕添加顶部填充，但它不起作用。
删除justifyContent: center，实际上我的内容顶部不再与状态栏重叠，但我仍想使内容居中。

试图在这里模仿我在项目中的内容：https://snack.expo.io/X0JCnVkwq

截图：

【问题讨论】：

我认为，它在您给定的示例中按预期工作。如果我删除 justifyContent: center，它看起来像您的图像，但没有任何更改，我看不到错误。您是否在手机或台式电脑上工作或检查渲染？您是否尝试过刷新缓存？
您是否尝试过 AndroidManifest.xml 中的代码
@Rene 我使用的是安卓设备。我实际上不确定我提供的链接是否重现了该问题。对不起
@RAGHVENDERKATARIA 我使用世博会。我读到 KeyboardAwareScrollView 不直接也不推荐。

标签： react-native expo react-native-flexbox

【解决方案1】：

我通过有条件地设置justifyContent 属性来解决它。 flex-start 当键盘可见时。 center 当键盘不可见时。
不是最好的方法，但它对我有用。

【讨论】：

【解决方案2】：

KeyboardAvoidingView

使用 react-native KeyboardAvoidingView 这可能有助于解决问题

https://reactnative.dev/docs/keyboardavoidingview

【讨论】：