动画未显示,乐天反应本机

时间:2019-02-15 08:43:33

标签: reactjs react-native animation lottie lottie-android

我有一个反应式本机视图,其中有一个lottie动画,但是lottie动画根本没有显示,屏幕只是黄色(封闭视图的背景色) ,请问可能有什么问题,下面是我的代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View, 
} from 'react-native';
import LottieView from 'lottie-react-native';

export default class Splash extends Component {
  constructor(props) {
    super(props);
  }

  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'yellow'}}>
        <LottieView
          style={{flex: 1}}
          source={require('../check.json')}
          autoPlay
          loop
        />
      </View>
    );
  }
}

1 个答案:

答案 0 :(得分:1)

我尝试了您提供的Lottie文件,它确实起作用。

这是我在App.js中使用以使其正常运行的代码。

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import LottieView from 'lottie-react-native';

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <LottieView
          style={{flex: 1}}
          source={require('./check.json')} {/* I think your issue is that you have the wrong path for your lottie file*/}
          autoPlay
          loop
        />
      </View>
    );
  }
}

请注意,在我的项目中,我的App.js和我的check.json位于同一文件夹中。

folder structure

这是它起作用的图片

lottie working