react-native-oh-library / lottie-react-native

lottie-react-native

迁移声明

• 本仓库已迁移至 GitCode：OpenHarmony-SIG/rntpc_lottie-react-native。
• 包名已更改为 @react-native-ohos/lottie-react-native，支持直接从 npm 下载。
• 更多详情请查阅新仓库的 README 文件。
• 本仓库旧版本的文档已归档：链接

Migration Announcement

• This repository has been migrated to GitCode：OpenHarmony-SIG/rntpc_lottie-react-native
• The package name has been changed to @react-native-ohos/lottie-react-native and is now available for direct download from npm.
• For more details, please refer to the README in the new repository.
• Archived documentation for versions in this repository can be found here: Link

lottie-react-native's Issues

原库部分接口在HarmonyOS中没有对应属性或接口支持

1，属性名称：renderMode

原库描述：a String flag to set whether or not to render with HARDWARE or SOFTWARE acceleration

2，属性名称：textFiltersIOS

描述：Only iOS, an array of objects denoting text layers by KeyPath and a new string value.

不支持原因：HarmonyOS中没有对应属性或接口支持

handleColorFilters方法里的item?.keypath包含非法值，导致应用闪退问题

handleColorFilters方法里的item?.keypath包含非法值，导致应用闪退问题

稳定性测试，概率报错：Error name:TypeError Error message:CallObj is NonCallable

描述 / Description

有十分之一概率报错
"Error name:TypeError
Error message:CallObj is NonCallable
Stacktrace:
Cannot get SourceMap info, dump raw stack:
at prepareProperties (phone|@ohos/lottie|2.0.23-rc.2|src/main/js/elements/helpers/FrameElement.js:13:1)
at prepareFrame (phone|@ohos/lottie|2.0.23-rc.2|src/main/js/elements/helpers/RenderableDOMElement.js:57:1)
at anonymous (phone|@ohos/lottie|2.0.23-rc.2|src/main/js/renderers/CanvasRendererBase.js:362:1)
at anonymous (phone|@ohos/lottie|2.0.23-rc.2|src/main/js/renderers/CanvasRendererBase.js:269:1)
at anonymous (phone|@ohos/lottie|2.0.23-rc.2|src/main/js/animation/AnimationItem.js:556:1)
at resize (phone|@react-native-oh-tpl/lottie-react-native|6.4.1-0.1.17-rc.3|src/main/ets/LottieAnimationView.ts:509:1)
at anonymous (phone|@react-native-oh-tpl/lottie-react-native|6.4.1-0.1.17-rc.3|src/main/ets/LottieAnimationView.ts:523:1)
at (oh_modules/.ohpm/@react-native-oh-tpl+lottie-react-native@9nyllsymjuy8sfelo+++als5ic+bp3iljof+aynkiuu=/oh_modules/@react-native-oh-tpl/lottie-react-native/src/main/ets/LottieAnimationView.ets:385:5)
at (common/CTReactNative/src/main/ets/provider/CRNProvider.ets:112:7)

复现步骤 / Steps to reproduce

No response

库版本 / Library version

6.4.1-0.1.17-rc.3

React Native OpenHarmony version

0.72.92

构建类型 / Build type

None

设备 / Device

None

设备版本 / Device model

No response

已悉知 / Acknowledgements

Yes

bottom-tabs 动画没有效果

描述 / Description

bottom-tabs 动画没有效果

复现步骤 / Steps to reproduce

No response

库版本 / Library version

6.4.1-0.1.14

React Native OpenHarmony version

0.72.38

构建类型 / Build type

None

设备 / Device

None

设备版本 / Device model

No response

已悉知 / Acknowledgements

Yes

原库部分接口在HarmonyOS中没有对应属性或接口支持

1，属性名称：onAnimationLoaded

原库描述：A callback function which will be called when animation is done loading. This callback is called with no parameters.

不支持原因：HarmonyOS中没有对应属性或接口支持、

2，属性名称：onAnimationFailure

原库描述：A callback function which will be called if an error occurs while working with the animation (loading, running, etc). This callback is called with a string error argument, which contains the error message that occured.

不支持原因：HarmonyOS中没有对应属性或接口支持

3，属性名称：resizeMode

原库描述：Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center.

不支持原因：HarmonyOS中没有对应属性或接口支持

4，属性名称：renderMode

原库描述：a String flag to set whether or not to render with HARDWARE or SOFTWARE acceleration

不支持原因：HarmonyOS中没有对应属性或接口支持

5，属性名称：colorFilters

原库描述：An array of objects denoting layers by KeyPath and a new color filter value (as hex string).

不支持原因：HarmonyOS中没有对应属性或接口支持

6，属性名称：textFiltersIOS

描述：Only iOS, an array of objects denoting text layers by KeyPath and a new string value.

不支持原因：HarmonyOS中没有对应属性或接口支持

添加onDisappear里销毁动画

rn-lottie使用canvas能力，在onDisappear中添加destroyAnimation方法

Possible implementation

rn库同步修改

添加LICENSE文件

添加LICENSE文件

运行崩溃

描述 / Description

如果开启metro了，运行正常。
否则，一运行就崩溃
版本：6.4.1-0.1.14
机型： 所有设备
错误日志：
Reason:TypeError
Error name:TypeError
Error message:Cannot read property props of undefined
Stacktrace:
at aboutToAppear (oh_modules/.ohpm/@react-native-oh-tpl+lottie-react-native@f6rbzciwciia68khmftyvxw+gqsnyjrdgaummv60cv8=/oh_modules/@react-native-oh-tpl/lottie-react-native/src/main/ets/LottieAnimationView.ets:51:51)
at buildWithNestingBuilder (../../../foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/jsXNode.js:200:1)
at build (../../../foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/jsXNode.js:209:1)
at build (../../../foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/jsXNode.js:69:1)
at create (oh_modules/.ohpm/@rnoh+react-native-openharmony@hliwtzdputqle5tzgnm2gfvlcubdiwtyg+f7iomvdho=/oh_modules/@rnoh/react-native-openharmony/src/main/ets/RNOH/CustomRNComponentFrameNodeFactory.ets:45:5)

复现步骤 / Steps to reproduce

一加载 lottie就直接崩溃

库版本 / Library version

6.4.1-0.1.14

React Native OpenHarmony version

0.72.32

构建类型 / Build type

Debug app & production bundle

设备 / Device

Real device

设备版本 / Device model

Mate X5

已悉知 / Acknowledgements

Yes

新版本在react-native-modal中不能自动播放，卡在第一帧

描述 / Description

import React, { ReactElement } from 'react'
import { Text, View } from "react-native";
import Modal from 'react-native-modal';
import LottieView from 'lottie-react-native';

// 给 Loading 组件添加类型
interface LoadingProps {
loadingVisible: boolean;
}

export const Loading = ({ loadingVisible }: LoadingProps) => (
<Modal
isVisible={loadingVisible}
useNativeDriver={true}
useNativeDriverForBackdrop={true}
style={{
alignItems: "center"
}}>
<View style={{
width: 120,
height: 120,
borderRadius: 10,
backgroundColor: "white",
alignItems: "center"
}}>
<LottieView source={require('../res/animations/loading.json')} autoPlay // 自动播放
loop // 循环播放
style={{ width: 100, height: 100, margin: 0 }} />
<Text style={{ marginTop: -20, fontSize: 14, color: "#666666" }}>加载中...

);

复现步骤 / Steps to reproduce

No response

库版本 / Library version

最新

React Native OpenHarmony version

最新

构建类型 / Build type

None

设备 / Device

None

设备版本 / Device model

No response

已悉知 / Acknowledgements

Yes

this.ctx.descriptorRegistry.findDescriptorWrapperByTag 获取不到值，返回undefined

按照文档修改之后获取不到Descriptor，是否还需要处理什么地方

DevEco Studio 5.0.1 Release

适配onAnimationLoaded、onAnimationFailure、resizeMode属性

1，属性名称：onAnimationLoaded

原库描述：A callback function which will be called when animation is done loading. This callback is called with no parameters.

不支持原因：HarmonyOS中没有对应属性或接口支持、

2，属性名称：onAnimationFailure

原库描述：A callback function which will be called if an error occurs while working with the animation (loading, running, etc). This callback is called with a string error argument, which contains the error message that occured.

不支持原因：HarmonyOS中没有对应属性或接口支持

3，属性名称：resizeMode

原库描述：Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center.

Possible implementation

底层lottieArk有更新，rn库同步升级

lottieView的progress属性支持传入Animated.value动画值吗，我试着传入动画值但是没有生效。社区库lottie-react-native是支持动画值的

Question

在您提交之前，请确保该该仓库或其他地方没有存在类似的 issue。

这个 issue 让您向维护者和其他开发者提出关于这个库的问题 - 请记住，即使问题被关闭，对话也可以继续进行 。
理想情况下，这个 issue 可能最终会形成一个对该库文档的 PR，未来其他开发者就可以不需要再次提问了。

Before submitting it, please ensure that this was not already asked in another issue.

This issue should serve for you to ask a question about the library to the maintainers and other fellow developers - remember that even if the issue gets closed, the conversation can move forward.
Also, ideally this issue should culminate in a PR to the documentation for this library so that future developers will have that doubt cleared.

原库部分接口在HarmonyOS中没有对应属性或接口支持

1：OH 的lottie-react-native 组件不支持onAnimationLoaded回调

属性名称：onAnimationLoaded 不支持

描述：A callback function which will be called when animation is done loading. This callback is called with no parameters.

支持平台：All

2：OH 的lottie-react-native 组件不支持onAnimationFailure回调

属性名称：onAnimationFailure 不支持

描述：A callback function which will be called if an error occurs while working with the animation (loading, running, etc). This callback is called with a string error argument, which contains the error message that occured.

支持平台：All

适配Canvas能力，适配lottieArkTS新版本

Possible implementation

适配Canvas能力，适配lottieArkTS新版本

fix：当开启字节码编译时，出现编译失败问题

描述 / Description

由于lottie/src/main/ets/common目录下存在两个文件类型不同的AnimationType文件ts/ets，在开启字节码编译时，ets文件会被编译成ts文件，导致出现重复文件，编译时会失败

复现步骤 / Steps to reproduce

开启字节码编译，编译运行

库版本 / Library version

6.4.1-0.1.11

React Native OpenHarmony version

0.72.39

构建类型 / Build type

None

设备 / Device

None

设备版本 / Device model

No response

已悉知 / Acknowledgements

Yes

fix：当开启字节码编译时，出现编译失败问题

Summary

close #32 同名文件导致的编译失败问题

Checklist

• 已经在真机设备或模拟器上测试通过
• 已经与 Android 或 iOS 平台做过效果/功能对比
• 已经添加了对应 API 的测试用例（如需要）
• 已经更新了文档（如需要）
• 更新了 JS/TS 代码 (如有)