时间戳

首页 > 解决方案 > 显示键盘时出现 React-native / Splash-Screen

android - 显示键盘时出现 React-native / Splash-Screen

问题描述

我在我的 react native 项目中添加了一个启动画面，当我打开键盘时，一切正常，它会短暂显示它背后的启动画面。视频： https ://drive.google.com/open?id=14ahrc-dyYnNEYAAX3iMQVwqqV6fVo_xG

重现

在drawable中创建background_splash.xml，其中包含以下代码：

 <?xml version="1.0" encoding="utf-8" ?>

<layer-list 
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/primary"/>
</layer-list>

然后在styles.xml文件中添加

<item name="android:windowBackground">
     @drawable/background_splash
</item>

预期行为

出现键盘时不应显示启动画面。

代码示例

一切都在 To Reproduce 选项卡中，您只需添加一个 TextInput 即可显示。

环境

React Native 环境信息：系统：操作系统：Windows 10 CPU：(4) x64 Intel(R) Xeon(R) CPU E5-1603 v4 @ 2.80GHz 内存：9.57 GB / 15.92 GB 二进制文件：npm：6.4.1 - C： \Program Files\nodejs\npm.CMD

标签： androidreact-nativesplash-screen

解决方案

我的应用程序遇到了同样的问题，这是我的解决方法。首先，您必须安装模块react-native-background-color，它允许您设置根 Activity 的背景颜色。

在您的 App.jsx 中调用该setColor方法后（使用短暂的超时以避免在启动屏幕后立即出现“闪烁”）示例，其中包含 hooks ：

export default function App(): Element {
    useEffect(() => {
        if (Platform.OS === "android") {
            setTimeout(() => {
                BackgroundColor.setColor("#FFFFFF");
            }, 500);
        }
    }, []);
    return <AppContainer />;
}

希望这有帮助！

编辑：通过Platform.OS测试改进代码。

推荐阅读