# @exodus/lottie-react-native 中文文档
规范地址：https://npmcn.com/package/%40exodus/lottie-react-native/
版本：7\.3\.6-exodus\.3
npm 元数据更新时间：2026-10-06T21:01:14.379Z
中文译文更新时间：2026-11-14T04:16:23.932Z
软件包许可：Apache-2\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40exodus/lottie-react-native
原文对照：https://npmcn.com/package/%40exodus/lottie-react-native/?lang=original
项目主页：https://airbnb.io/lottie/#/react-native
源码仓库：https://github.com/ExodusMovement/lottie-react-native
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：145 kB，66 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \>=0\.46
- 首次发布：2026-02-23T20:07:12.524Z
- 最新版本发布：2026-03-17T16:01:45.967Z
- 近 30 天下载量：10421（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）
## 中文简介
洛特的原生装订
## 安装
```sh
npm install @exodus/lottie-react-native
```
也可以使用：`pnpm add @exodus/lottie-react-native`、`yarn add @exodus/lottie-react-native`、`bun add @exodus/lottie-react-native`
## README
# Lottie 反应原生
[](https://www.npmjs.com/package/lottie-react-native) [](https://www.npmjs.com/package/lottie-react-native)
反应原生( Lottie) 组件[iOS系统](https://github.com/airbnb/lottie-ios) 财务报告和审定财务报表 [机器人](https://github.com/airbnb/lottie-android)(中文(简体) )
洛蒂是图书馆的生态系统 用于解析 [效果后的 Adobe](http://www.adobe.com/products/aftereffects.html) 动画导出为 JSON [身体运动](https://github.com/bodymovin/bodymovin) 使他们变成本地人!
设计师们第一次可以创造 **和船舶** 美丽的动画,没有工程师 艰苦地用手重新创作.
## 安装
## V6中突破变化!
我们在第六版做了一些重大更新 可能会影响你目前的设置 为了了解这些变化的所有细节,请查看 [更改日志](https://npmcn.com/CHANGELOG.md)。 。 。 .
保持知情,确保无缝地向最新版本过渡. 谢谢!
### iOS和Android 软件
- 安装 `lottie-react-native` (最新数据):
```
yarn add lottie-react-native
```
转到您的 ios 文件夹并运行 :
```
pod install
```
## 使用量
Lottie可用声明方式:
```jsx
import React from 'react';
import LottieView from 'lottie-react-native';
export default function Animation() {
return (
);
}
```
此外,还有必要的API,有时比较简单.
```tsx
import React, { useEffect, useRef } from 'react';
import LottieView from 'lottie-react-native';
export default function AnimationWithImperativeApi() {
const animationRef = useRef(null);
useEffect(() => {
animationRef.current?.play();
// Or set a specific startFrame and endFrame with:
animationRef.current?.play(30, 120);
}, []);
return (
);
}
```
Lottie的动画取景可以由React Independent动画或再生API来控制.
```tsx
import React, { useEffect, useRef, Animated } from 'react';
import { Animated, Easing } from 'react-native';
import LottieView from 'lottie-react-native';
const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);
export default function ControllingAnimationProgress() {
const animationProgress = useRef(new Animated.Value(0));
useEffect(() => {
Animated.timing(animationProgress.current, {
toValue: 1,
duration: 5000,
easing: Easing.linear,
useNativeDriver: false,
}).start();
}, []);
return (
);
}
```
改变地层颜色 :
注:这一特性可能无法在Android上正常工作。 我们很快会试着解决的.
```jsx
import React from 'react';
import LottieView from 'lottie-react-native';
export default function ChangingColorOfLayers() {
return (
);
}
```
## 如果你想使用的话 `.lottie` 文件
你需要修改你的 `metro.config.js` 因此,通过添加 `lottie` 扩展至 `assetExts` 数组 :
```js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
/**
* Metro configuration
* https://facebook.github.io/metro/docs/configuration
*
* @type {import('metro-config').MetroConfig}
*/
const config = {
resolver: {
assetExts: [...defaultConfig.resolver.assetExts, 'lottie'],
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
```
## 为 Dot Lottie 文件设置游戏
在以下路径中创建文件 `__mocks__/lottieMock.js` 并添加以下代码:
```js
module.exports = 'lottie-test-file-stub';
```
然后在你的 `jest.config.js` 文件 :
```js
module.exports = {
...
moduleNameMapper: {
...,
'\\.(lottie)$': '/jest/__mocks__/lottieMock.js',
},
...
}
```
## API 密码
你可以找到我们所有可用的道具和方法 [API 文档](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md)。这些是最常见的:
| Prop | 说明 | 默认 |
| --- | --- | --- |
| **`source`** | **强制性** -动画的来源 可以被字符串作为本地资产引用,也可以与带有一个对象的远程引用 `uri` 也可以是动画中真正的JS对象 `require('../path/to/animation.json')`。 。 。 . | _无_ |
| **`style`** | 视图的样式属性, 如标准所期望的 [`View`](https://facebook.github.io/react-native/docs/layout-props.html)。 。 。 . | 你需要手动设置它。 参见此 [拉动请求](https://github.com/lottie-react-native/lottie-react-native/pull/992)。 。 。 . |
| **`loop`** | 显示动画是否循环的布尔旗 . | `true` |
| **`autoPlay`** | 显示动画是否在挂载时自动启动的布尔旗 。 这只影响到必需的API. | `false` |
| **`colorFilters`** | 用 KeyPath 来解析多层对象的阵列和一个新的颜色过滤值( 作为十六进制字符串) . | `[]` |
[还有...](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md)
## 解决问题
并不是所有的"后效应"特性都由洛蒂支持. 如果您注意到有些图层或动画缺少检查 [此列表](https://github.com/airbnb/lottie/blob/master/supported-features.md) 以确保它们得到支持.
## 再来
查看更多文档、 FAQ、 帮助、 示例和更多 [空气bnb.io/地铁](https://airbnb.io/lottie/)
## 常见问题
### @exodus/lottie-react-native 是什么？
洛特的原生装订
### 如何安装 @exodus/lottie-react-native？
在项目目录运行 npm install @exodus/lottie-react-native，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\>=0\.46）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @exodus/lottie-react-native 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @exodus/lottie-react-native 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @exodus/lottie-react-native 可以商用吗？
@exodus/lottie-react-native 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。
### @exodus/lottie-react-native 的下载量有多少？
根据 npm 官方下载统计，@exodus/lottie-react-native 在 2026/10/14 – 2026/11/12 这 30 天内被下载 10,421 次，日均约 347 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @exodus/lottie-react-native 还在维护吗？
最新版本 7\.3\.6-exodus\.3 发布于 2026/03/18（7 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 3 个；首次发布于 2026/02/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。