React Native 开屏画面 splash screen

编译出来的 React Native Android App 在打开时，有个开屏画面，一闪而过。 虽然不到一秒，但是也算非常显眼了。

这个官方的学名为 Splash Screen:

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.

Expo 默认已安装依赖

package.json

"expo-splash-screen": "~0.29.21",

默认代码

app._layout.tsx

有一段逻辑，在加载字体文件时，显示 Splash Screen:

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

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

修改默认图片

参考官方文档：

https://docs.expo.dev/versions/latest/sdk/splash-screen/

但是修改 app.json 中的配置，并不会影响到已存在的 Android 目录。

如果需要在已存在的 Android 项目中修改加载图片，则需要手动修改 res 目录下的图片。

而且图片的尺寸在我的手机也有问题，需要调试一下。

参考

• https://docs.expo.dev/versions/latest/sdk/splash-screen/
• https://github.com/expo/expo/tree/main/packages/expo-splash-screen#-configure-android

阅读更多 👀

React Native 跨平台应用开发教程

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式