在离子电容器反应中隐藏启动画面答案

【问题标题】：Hide Splash Screen in Ionic Capacitor React在离子电容器反应中隐藏启动画面
【发布时间】：2021-06-13 17:18:52
【问题描述】：

我们如何禁用 Ionic 应用程序上的启动画面？我正在使用 Ionic 4、Capacitor 和 React。我试图将这个添加到电容器.config.json

{
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  }
}

上面的代码根本不起作用。

【问题讨论】：

你是怎么找到的？

标签： reactjs ionic4 splash-screen capacitor

【解决方案1】：

您可以使用SplashScreen 插件隐藏启动画面：

import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

function useSplashHide(){
    useEffect(() => {
        SplashScreen.hide();
    }, []);
}

你可以像使用任何钩子一样使用它：

function MyComponent(props){
  useSplashHide()

  return <>....</>
}

文档是here

【讨论】：

@LengLong 你到底是怎么用的，不能让它工作
@kkakroo 我已经编辑了答案来告诉你如何使用它，它是一个普通的钩子，所以你可以像使用任何钩子一样使用它。
我在 Login.tsx（这是我第一个加载的组件）和 App.tsx 中都试过这个。还尝试将其称为组件。那也没用。

【解决方案2】：

电容器版本 v2

https://capacitorjs.com/docs/v2/apis/splash-screen

import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

1.调用hide()

// Hide the splash (you should do this on app launch)
SplashScreen.hide();<------------------------call hide function

2.或将显示持续时间设置为 0

// Show the splash for two seconds and then auto hide:
SplashScreen.show({
  showDuration: 0,<------------------------set 0 duration to hide
  autoHide: true,
});

版本 v3

https://capacitorjs.com/docs/apis/splash-screen

【讨论】：

【解决方案3】：

您可以在config.xml 中添加以下行

<preference name="SplashScreenDelay" value="0"/>

【讨论】：

对不起。我知道如果你使用 Cordova 可以，但我目前使用的是没有 config.xml 的电容器