React Native Как использовать файл Lott ie JSON? - PullRequest
Новая
       69

React Native Как использовать файл Lott ie JSON?

0 голосов
/ 22 апреля 2020

Эй, ребята, я хочу использовать Lott ie с React Native, чтобы показать стакан воды, которая наполняется.

Я нашел несколько готовых файлов Lott ie, которые выглядят довольно хорошо, и я хотел используйте их внутри моего приложения.

Я установил Lott ie и связал его (с помощью rn-link, и я попробовал это вручную ..).

У меня была ошибка, показывающая, что указана ошибка TypeError: Невозможно прочитать свойство "Commands" из undefined. - но после смены источника он исчез. У меня сейчас проблема в том, что он показывает мне только белый экран и ничего не происходит.

Я даже использую официальный код, который взят из Lott ie Docs (https://airbnb.io/lottie/# / Reaction-native )

Я попробовал это с 2 различными анимациями (1: https://lottiefiles.com/15421-glass-of-water, 2: https://lottiefiles.com/5922-water-loading?lang=de) - они в моем папка активов и внутри папки android / assets также!

Вот код: 

    import React from 'react';
    import { Animated, Easing } from 'react-native';
    import LottieView from 'lottie-react-native';

import Lottiewater from "../assets/Lottiewater.json";
import LottieGlas from "../assets/5922-water-loading.json"

    export default class Water extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          progress: new Animated.Value(0),
        };
      }

      componentDidMount() {
        Animated.timing(this.state.progress, {
          toValue: 1,
          duration: 5000,
          easing: Easing.linear,
          useNativeDriver: true
        }).start();
      }

      render() {
        return (
          <LottieView source={require('../assets/Lottiewater.json')} progress={this.state.progress} />
          <LottieView source={LottieGlas} progress={this.state.progress} autoSize />
        );
      }
    }


    // OR the code below! 



import Lottiewater from "../assets/Lottiewater.json";
import LottieGlas from "../assets/5922-water-loading.json"

import React from 'react';
import LottieView from 'lottie-react-native';

export default class Water extends React.Component {
  componentDidMount() {
    this.animation.play();
    // Or set a specific startFrame and endFrame with:
    // this.animation.play(30, 120);
  }

  render() {
    return (
      <LottieView
        ref={animation => {
          this.animation = animation;
        }}
            // source={require('../assets/Lottiewater.json')}
            source={Lottiewater}
          />
        );
      }
    }

1 Ответ

0 голосов
/ 22 апреля 2020

Хорошо, поэтому я исправил это - для меня проблема заключалась в том, что я не собирал приложение снова. Так что закрываем эмулятор и перезапускаем Android Studio для перекомпоновки исправления для меня.

...