在本机中使用动画循环在视图中滚动时出现帧速率问题

Question

我有一个正在播放动画的视图（我正在使用Lottie框架），当我滚动该视图时，它在滚动过程中有很多滞后，看来帧频下降很多，我在动画中使用了nativeDriver功能，但没有任何改变，如何防止此帧掉落？ 这是我的代码：

constructor() {        
    super();
    this.state = {     
      refreshing : false,      
      loading: true,
      showAlert : false,
      showCustomAlert: false,
      funcKind : '',
      selestedItem : '',
      alertType : true,
      firstTime : true,
      alertMessage : '',
      price : '',
      currency : '',
      progress: new Animated.Value(0),    
      packages : [],
      appState: AppState.currentState,
    };
  }

componentDidMount() {   

    const { navigation } = this.props;
    AppState.addEventListener('change', this._handleAppStateChange);

    this.focusListener = navigation.addListener("didFocus", () => {
      console.log('I am in')
      this.runAnimation()
    });

    this.blurListener = navigation.addListener("willBlur", () => {
      AppState.removeEventListener('change', this._handleAppStateChange);
      console.log('I am out')
      Animated.timing(this.state.progress).stop();
      this.state.progress.stopAnimation();      
    });     

    this._bootstrapAsync();  
  }

_handleAppStateChange = (nextAppState) => {
  if (
    this.state.appState.match(/inactive|background/) &&
    nextAppState === 'active'
  ) {
    this.runAnimation()
  }else{
    Animated.timing(this.state.progress).stop();
    this.state.progress.stopAnimation();
    console.log('deactive')   
  }
  this.setState({appState: nextAppState});
};

runAnimation() {
    console.log('run animation');
    this.state.progress.setValue(0);
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 3000,
      //easing: Easing.linear,
      useNativeDriver : true
    })
    .start((o) => {
        if(o.finished) {
          this.runAnimation();
        }
      })   
}

render() {    
    let {coins, gems, hearts} = this.props.homeProps;    
    let {packages,boxTimers} = this.state;    
    let storeBoxes = []
    packages.forEach((item , index) => {
      if(item.active){
        storeBoxes.push(
          <StoreBox
            badgeColor={item.color_bottom}
            badgeColorTop={item.color_top}
            badgeTitle={item.caption}
            badgeTime={item.end_time}            
            packages={item.packages}
            tag={item.tag}
            onPress={this._buyBridge}
            animation={this.state.progress}
          />
        );
      }
    })
    const { navigation } = this.props;
    return (
      <SafeAreaView 
      showsVerticalScrollIndicator={false}
          shouldRasterizeIOS={true}
      style={{ flex: 1, backgroundColor: 'rgb(2, 78, 180)' }}><StatusBar barStyle="light-content" />
        <ImageBackground
          source={require('../../assets/bg.png')}
          style={[globalStyles.bgContainer]}
        >                                     
          <ScrollView style={[globalStyles.pageContainer]}
          renderToHardwareTextureAndroid={true}
          showsVerticalScrollIndicator={false}
          shouldRasterizeIOS={true}
            refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh}
                tintColor={'white'}
                //colors={'white'}
              />
            }
          >            
            {storeBoxes}
          </ScrollView>
        </ImageBackground>
      </SafeAreaView>
    );
  }

我有一些StoreBox组件，其中包含动画对象，它可以正常工作，并且可以很好地显示动画，但是当我尝试向下或向上滚动时，会出现滞后和丢帧现象。我也使用了“ shouldRasterizeIOS = {true}”，但它也没有帮助，因此请为我提供建议。谢谢