问题
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