React Native: Lottie Animations мерцает на Android, но не на iOS - PullRequest
Новая
       33

React Native: Lottie Animations мерцает на Android, но не на iOS

0 голосов
/ 04 июня 2018

Я создал специальный компонент под названием «CircleLoader», который воспроизводит анимацию Lottie, когда она видна.Он служит загрузочной анимацией.На iOS все отлично работает, но на Android анимация мерцает.Экран в симуляторе и на реальном устройстве находится между черным и самой анимацией.Кто-нибудь сталкивался с этой проблемой раньше?Никаких ошибок не отображается.

Вот мой код компонента, если он полезен. 

 import React from 'react';
 import { Button, StyleSheet, View } from 'react-native';
 import { DangerZone } from 'expo';
 import { dimensions, colors } from '../Utils/BaseStyles';
 import FadeInView from 'react-native-fade-in-view';
 const { Lottie } = DangerZone;
 import * as Animatable from 'react-native-animatable'

 export default class CircleLoader extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
       animation: require('./../../assets/custom_load.json'),
       visible: this.props.visible ? this.props.visible : false,
     };
   };

   componentDidMount() {
     this._playAnimation();
   }

render() {
    const circle_loader = require('./../../assets/custom_load.json')
    return (
       <View style={{flex: 1, height: dimensions.fullHeight, width: 
 dimensions.fullWidth, backgroundColor: colors.primary_white}}>
         <FadeInView duration={100}style={styles.animationContainer} >
           {this.state.animation &&
             <Lottie
              ref={animation => {
                 this.animation = animation;
               }}
           style={{
            width: dimensions.fullWidth,
            height: dimensions.fullHeight,
            justifyContent: 'center',
            alignItems: 'center',
            alignSelf: 'center',
            backgroundColor: colors.primary_white,
          }}
          source={circle_loader}
        />}
    </FadeInView>
  </View>

);
}

_playAnimation() {
    this.animation.play();
 }
}

const styles = StyleSheet.create({
    animationContainer: {
     backgroundColor: colors.primary_white,
     alignItems: 'center',
     justifyContent: 'center',
     flex: 1,
     width: dimensions.fullWidth,
     height: dimensions.fullHeight
    },
 });
...