如何在React Native Expo的app.json中添加JSON动画启动屏文件？

核心结论 #

不能直接在app.json中使用JSON动画文件作为启动屏——Expo的原生启动屏只支持静态图片格式（如PNG、JPG），不管是GIF还是转成JSON的动画都无法通过app.json直接配置为启动屏。但可以通过自定义动画启动屏组件的方式实现需求。

具体实现步骤 #

1. 配置基础静态启动屏（app.json）

先在app.json中设置一张静态图片作为初始加载占位，保证原生启动阶段有内容显示：

{
  "expo": {
    "splash": {
      "image": "./assets/splash-static.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}

2. 准备Lottie兼容的JSON动画文件

将你的GIF转换为Lottie格式的JSON文件（可通过After Effects的Bodymovin插件或专业转换工具完成），然后将JSON文件放入项目的assets目录中。

3. 安装Lottie依赖

执行命令安装Expo官方支持的Lottie动画库：

npx expo install lottie-react-native

4. 创建自定义动画启动屏组件

在项目中新建一个动画启动屏组件（例如components/AnimatedSplash.js）：

import React, { useEffect, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

export default function AnimatedSplash({ onAnimationFinish }) {
  const animationRef = useRef(null);

  useEffect(() => {
    animationRef.current?.play();
  }, []);

  return (
    <View style={styles.container}>
      <LottieView
        ref={animationRef}
        source={require('../assets/animated-splash.json')}
        autoPlay={false}
        loop={false}
        onAnimationFinish={onAnimationFinish}
        style={styles.animation}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  animation: {
    width: 300,
    height: 300,
  },
});

5. 在App入口控制启动屏显示

修改App.js，初始显示动画启动屏，等动画播放完成后切换到主页面：

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import AnimatedSplash from './components/AnimatedSplash';

export default function App() {
  const [isSplashVisible, setIsSplashVisible] = useState(true);

  const handleSplashFinish = () => {
    setIsSplashVisible(false);
  };

  if (isSplashVisible) {
    return <AnimatedSplash onAnimationFinish={handleSplashFinish} />;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>主页面内容</Text>
    </View>
  );
}

补充说明 #

• 原生启动屏（app.json配置的）是App启动时系统直接加载的，仅支持静态位图，无法解析JSON动画。
• Lottie是Expo官方推荐的动画方案，支持JSON格式的动画文件，性能和兼容性都有保障。

内容的提问来源于stack exchange，提问作者user9716988