2

我已经关注了 React native 的每个 Lottie 示例，并查看了具有相同问题的问题，例如Expo 上的 Lottie 动画，但我已经使用 React native 成功导入了通过 Bodymovin 导出到 .json 的动画：

import React, {Component} from 'react';
import Animation from 'lottie-react-native';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';

export default class LottieTest extends Component {
  componentDidMount() {
    this.animation.play();
  }
  render()
  {
    //console.log(this.);
    return (
      <View>
      <Animation
        ref={animation => { this.animation = animation; }}
        style={{
          width: 500,
          height: 500
        }}
        source={require('./animations/btn1.json')}
      />
      </View>
    );
  }
}

我把它放在一个视图中，所以这不是问题。动画 json 文件未找到图像，因此仅显示形状（在 Aftereffects 中转换为形状的矢量）。

我不知道为什么 json 找不到图像的路径。我的图像文件夹与 .json 位于同一文件夹中，并且我在此处更改了路径以匹配从中调用它的类：

,"fr":29.9700012207031,"ip":0,"op":34.0000013848484,"w":861,"h":861,"nm":"button1","ddd":0,"assets":[{"id":"image_0","w":782,"h":782,"u":"../animations/images/","p":"img_0.png"}

如何使用 React native 和 Lottie 导入图像？这里有什么问题？

4

1 回答 1

1

动画图像应直接添加到XCode和 Android Studio 项目中。

所以你应该在 React Native 项目中有.json文件，在ios/android项目中有图像资源。

于 2017-11-10T03:15:37.453 回答