Lottie in react native can't find images?

依然范特西╮ 提交于 2021-02-08 04:01:16

问题


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>
    );
  }
}

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.

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"}

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


回答1:


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

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



来源:https://stackoverflow.com/questions/45105186/lottie-in-react-native-cant-find-images

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!