在 React Native 应用中添加动画加载器和启动画面

react jsjavascript libraryfront end technology更新于 2025/11/19 16:44:17

在本文中，我们将了解如何在 React Native 应用中实现 Lottie 动画。Lottie 是一种开源动画文件格式，体积小巧、质量高、交互性强，并且可以在运行时进行操作。 Lottie 动画主要用于加载页面或作为启动页面。

那么，让我们在 React Native 移动应用中添加一个 Lottie 动画。

示例

前往 Lottie 动画官方网站并下载 Lottie JSON 文件。

我将使用的动画链接 −

https://lottiefiles.com/74546-character-02# /

将 JSON 文件命名为 "myloader.json"，并将其与 App.js 保持在同一目录下。

现在安装 lottie-react-native包

npm i --save lottie-react-native

Lottie 库将用于将 lottie-animation 的 JSON 文件添加到您的 React Native 应用中。

要添加下载的动画，首先从 lottie-react-native 导入 LottieView。

接下来，在 App.js 中插入以下代码行 −

import React from 'react';
import LottieView from 'lottie-react-native';

const App = () => {
   return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
         <LottieView source={require('./myloader.json')} autoPlay loop/>
      </View>
   );
}

export default App;

在 LottieView 的 source 属性中，您需要提供下载的 lottie JSON 文件的 JSON 路径来实现该动画。