Expo SplashScreen

一个库，提供对控制原生启动屏幕的可见性行为的访问。

expo-splash-screen 库中的 SplashScreen 模块用于告诉启动屏幕保持可见，直到被明确告知隐藏为止。这对于执行在幕后发生的任务非常有用，例如进行 API 调用、预加载字体、动画启动屏幕等。

¥The SplashScreen module from the expo-splash-screen library is used to tell the splash screen to remain visible until it has been explicitly told to hide. This is useful to do tasks that will happen behind the scenes such as making API calls, pre-loading fonts, animating the splash screen and so on.

另请参阅有关 创建闪屏图片 或 使用浏览器快速生成图标和启动屏幕 的指南。

¥Also, see the guide on creating a splash screen image, or quickly generate an icon and splash screen using your browser.

安装

¥Installation

If you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.

用法

¥Usage

此示例演示如何在加载应用资源时保持初始屏幕可见，然后在应用渲染一些初始内容时隐藏初始屏幕。

¥This example shows how to keep the splash screen visible while loading app resources and then hide the splash screen when the app has rendered some initial content.

import { useCallback, useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import Entypo from '@expo/vector-icons/Entypo';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';

// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

// Set the animation options. This is optional.
SplashScreen.setOptions({
  duration: 1000,
  fade: true,
});

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Pre-load fonts, make any API calls you need to do here
        await Font.loadAsync(Entypo.font);
        // Artificially delay for two seconds to simulate a slow loading
        // experience. Remove this if you copy and paste the code!
        await new Promise(resolve => setTimeout(resolve, 2000));
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(() => {
    if (appIsReady) {
      // This tells the splash screen to hide immediately! If we call this after
      // `setAppIsReady`, then we may see a blank screen while the app is
      // loading its initial state and rendering its first pixels. So instead,
      // we hide the splash screen once we know the root view has already
      // performed layout.
      SplashScreen.hide();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <View
      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
      onLayout={onLayoutRootView}>
      <Text>SplashScreen Demo! 👋</Text>
      <Entypo name="rocket" size={30} />
    </View>
  );
}

配置

¥Configuration

如果你在项目中使用配置插件（EAS 构建 或 npx expo run:[android|ios]），则可以使用其内置的 配置插件 配置 expo-splash-screen。该插件允许你配置无法在运行时设置的各种属性，并且需要构建新的应用二进制文件才能生效。如果你的应用不使用 EAS Build，则你需要手动配置包。

¥You can configure expo-splash-screen using its built-in config plugin if you use config plugins in your project (EAS Build or npx expo run:[android|ios]). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does not use EAS Build, then you'll need to manually configure the package.

使用配置插件（如下所示）是配置启动画面的推荐方法。其他方法现在被视为遗留方法，将来会被删除。

¥Using the config plugin, as shown below, is the recommended method for configuring the splash screen. The other methods are now considered legacy and will be removed in the future.

Example app.json with config plugin

{
"expo": {
  "plugins": [
    [
      "expo-splash-screen",
      {
        "backgroundColor": "#232323",
        "image": "./assets/splash-icon.png",
        "dark": {
          "image": "./assets/splash-icon-dark.png",
          "backgroundColor": "#000000"
        },
        "imageWidth": 200
      }
    ]
  ],
}
}

Configurable properties

你还可以使用以下 应用配置 属性配置 expo-splash-screen，但应优先使用配置插件。

¥You can also configure expo-splash-screen, using the following app config properties but the config plugin should be preferred.

• splash

• android.splash

• ios.splash

动画启动画面

¥Animating the splash screen

SplashScreen 提供开箱即用的淡入淡出动画。它可以使用 setOptions 方法进行配置。

¥SplashScreen provides an out-of-the-box fade animation. It can be configured using the setOptions method.

SplashScreen.setOptions({
  duration: 1000,
  fade: true,
});

如果你更喜欢使用自定义动画，请参阅 with-splash-screen 示例，了解如何将任意动画应用于启动画面。你可以通过运行 npx create-react-native-app -t with-splash-screen 从本示例初始化一个新项目。

¥If you prefer to use custom animation, see the with-splash-screen example on how to apply any arbitrary animations to your splash screen. You can initialize a new project from this example by running npx create-react-native-app -t with-splash-screen.

API

import * as SplashScreen from 'expo-splash-screen';

Methods

import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
 // ...
}

Types