Lottie在React Native中找不到图像? [英] Lottie in react native can't find images?

问题描述

我已经按照每个Lottie上的React Native示例进行了研究，并研究了具有相同问题的问题，例如 Lottie动画在Expo 上，但是我已经使用React native在这里成功导入了通过Bodymovin导出到.json的动画:

I have followed every Lottie example for React native and looked at questions that have the same problem like Lottie animation on Expo but I have successfully imported an animation exported to .json via Bodymovin using 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中转换为形状的矢量).

I am putting it in a view so that is not the problem. The animation json file is not finding the images, so only the shapes (vectors that were converted to shapes in Aftereffects) are being displayed.

我不知道为什么json无法找到图像的路径.我的图片文件夹与.json放在同一文件夹中，我在这里更改了路径以匹配从其调用的类:

I can't figure out why the json cant find path to the images. My images folder is in same folder as the .json and I have changed the path here to match the class it is being called from:

,"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导入图像?怎么了?

How can I import images using React native and Lottie? What is wrong here?

推荐答案

用于动画的图像应直接添加到 XCode 和Android Studio项目中.

Images for animation should be added to XCode and Android Studio projects directly.

因此，您应该在React Native项目中具有 .json 文件，在 ios/android 项目中具有图像资产.

So you should have .json file in React Native project and image assets in ios/android projects.

这篇关于Lottie在React Native中找不到图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！