Question

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

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导入图像？这有什么不对？

Answer 1

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

因此，您应该在React Native项目中使用 .json 文件，并在 ios / android 项目中使用图像资源。

Lottie in native本身无法找到图像？

1 个答案: