android - React Native : Lottie Animations flicker on Android, 但不是 iOS

Question

我构建了一个名为“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
    },
 });

Answer 1

我尝试了您的代码并进行了一些更改，例如删除了 DangerZone 和 Lottie 并添加了 LottieView。它对我有用。你可以试试这段代码:

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';
import LottieView from 'lottie-react-native'; // **Add this for LottieFiles

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 &&
             <LottieView
              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
    },
 });