当键盘出现在 React Native Expo 托管项目和 Android 上时视图闪烁

Question

我正在 React Native 和 Expo 中练习一个非常基本的项目。该项目不使用弹出的项目，因此我无法直接与特定平台（Android 和 iOS）的项目交互，我希望它保持这种状态。

几天前，当我尝试编辑登录表单的字段时，我在 Android 中看到了一个问题。事实证明，在键盘打开之前，出现了一个白色的小闪光。正如我在 GitHub 上阅读的几乎所有 Expo 页面一样，这是因为应用程序具有应用程序的空白视图，并且可以在这些平台的项目中更改此行为（我之前提到过，我没有）并且我本周一直在寻找一种方法来实现这一目标，然后我找到了这个文档，但我仍然不知道这是否有效以及是否可以更改所述根视图颜色： https: //docs.expo.io/版本/最新/sdk/注册根组件/

键盘问题的视频：https://i.stack.imgur.com/uOvZl.jpg

我遇到的错误与此视频中的错误相同，但我不知道是否有办法解决该问题，因为我必须使用它来React Navigation v5创建导航堆栈。另外，我使用黑色作为背景，这使得这种行为更加明显。

我尝试过不同的方法，例如更改键盘的布局模式（但这使我失去了滚动的能力），也使其对视图的响应更加灵敏，KeyboardAvoidingView但这ScrollView是不可能的。

这是我正在使用的：

• 世博 SDK 39
• 世博 CLI：3.28.5
• 反应导航 v5

这是一些代码：

package.json dependencies

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.10.6",
    "@react-navigation/native": "^5.8.6",
    "@react-navigation/stack": "^5.12.3",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

App.json

{
  "expo": {
    "name": "appName",
    "slug": "appName",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "backgroundColor": "#000000",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#000000"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": false
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "androidStatusBar": {
      "barStyle": "light-content",
      "backgroundColor": "#000000"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

App.js

import React from "react";
import { View, TextInput } from "react-native";

export default App = () => {
  return (
    <View
      style={{
        backgroundColor: "#000",
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <TextInput
        placeholder="Email"
        placeholderTextColor="#424242"
        style={{
          color: "white",
          backgroundColor: "#d8d8d8",
          padding: 15,

          width: "80%",
        }}
      />
    </View>
  );
};