seyedmostafahasani/react-native-splash-motion

这是什么？

核心功能

• 01原生播放 Lottie .json 与 dotLottie .lottie 动画。
• 02从应用启动第一帧开始播放，早于 JS 包加载。
• 03通过 CLI 或 Expo 配置插件自动配置原生启动页。
• 04hide() 可等待当前循环结束、播放结束标记并淡出。
• 05可选提供首帧 PNG，使静态启动页与动画衔接。

适用场景

• 在 React Native 应用中展示品牌动画启动页，避免 JS 启动期间的空白等待。
• 在字体或导航就绪后，播放平滑的退出动画。
• 在 Expo 或原生 React Native 项目中，将已有的 After Effects 或 LottieFiles 动画用作启动页。

快速上手

1. 1

   安装软件包和 Nitro Modules

   yarn add react-native-splash-motion react-native-nitro-modules
2. 2

   从 Lottie 文件生成启动画面

   npx splash-motion generate assets/splash.json --background "#0F6E56"
3. 3

   安装 iOS Pods 并重新构建应用

   cd ios && pod install
4. 4

   应用就绪后调用 SplashMotion.hide()

使用前须知

• !需要启用 React Native 新架构，因为它依赖 Nitro Modules。
• !Expo 项目需要使用开发构建，因为 Expo Go 无法加载自定义原生代码。
• !最低支持 iOS 15 和 Android 7（API 24）。
• !该项目较新，仅有 37 个 Star，元数据中未显示发布历史。

收录于专题

标签

常见问题

react-native-splash-motion 是什么？

为 React Native 应用提供 Lottie 启动动画，在 JS 包加载前即由原生层播放。 SplashMotion 是一个用于 React Native 的动画启动页库。多数动画启动页通过 React 渲染，动画要等 JavaScript 包加载完才能开始，SplashMotion 则在应用启动的第一帧就用原生视图播放 Lottie 或 dotLottie 动画，并在 JS 包加载期间持续播放，最后通过可选的结束动画和淡出过渡进入应用。

react-native-splash-motion 可以免费使用吗？用的什么许可证？

react-native-splash-motion 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

react-native-splash-motion 还在维护吗？

活跃维护中。react-native-splash-motion 最近一次提交是在 2026年11月7日。

react-native-splash-motion 适合用来做什么？

在 React Native 应用中展示品牌动画启动页，避免 JS 启动期间的空白等待。 在字体或导航就绪后，播放平滑的退出动画。 在 Expo 或原生 React Native 项目中，将已有的 After Effects 或 LottieFiles 动画用作启动页。

react-native-splash-motion 怎么安装和运行？

安装软件包和 Nitro Modules: yarn add react-native-splash-motion react-native-nitro-modules 从 Lottie 文件生成启动画面: npx splash-motion generate assets/splash.json --background "#0F6E56" 安装 iOS Pods 并重新构建应用: cd ios && pod install 应用就绪后调用 SplashMotion.hide()

在哪里获取 react-native-splash-motion？

源代码和安装说明在 GitHub 上：https://github.com/seyedmostafahasani/react-native-splash-motion