14、在 React Native 中集成和控制 Lottie 动画

在 React Native 中集成和控制 Lottie 动画

1. 在 React Native 应用中使用 Lottie 文件

当我们将动画导出为 Lottie 文件后，就可以将其集成到任何 React Native 应用中，并在 iOS 或 Android 设备上启动动画。以下是具体步骤：
- 存储 Lottie 文件 ：首先要把 Lottie 文件存放在应用内的文件夹中，确保能在 React 组件和屏幕中导入该文件夹里的文件。例如，可将 Lottie 文件存于 assets 文件夹，这里也是应用中所有图片的存放处。比如，把名为 myLottieFile.json 的 JSON 文件存于 assets/animations 文件夹，这样就能通过简单的导入语句 require('./assets/animations/myLottieFile.json') 来访问它。
- 集成 Lottie 文件到 App.js ：以下是在提议的文件夹结构中使用集成的 Lottie 文件时， App.js 的示例代码：

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

const Ap