Lottie Animation没有出现在CardView中？

Question

我最近进入洛蒂，到目前为止我很喜欢它。我只是很难在我想要的地方显示动画。到目前为止，我能够像这样在外面显示它：

<View style = { styles.MainContainer }>
   <Animation
         progress={this.state.progress}
         source={require('../Animations/favourite_app_icon.json')}

         />
     <ScrollView>

        <FlatList

          data={ this.state.dataSource}

          ItemSeparatorComponent = {this.FlatListItemSeparator}


          renderItem={({item}) => <View>


          <View style={styles.coverContainer}>
      <ImageBackground
        source={{uri:`http://www.example.com/img/123.jpg`}}
        style={styles.coverImage}
      >
      </ImageBackground>
    </View>
    <View style={styles.ImageContainer}>

    </View>


          </View>


        }

        keyExtractor={(item, index) => index.toString()}
        removeClippedSubviews

     />

     <FlatList

       data={ this.state.image}

       ItemSeparatorComponent = {this.FlatListItemSeparator}


       renderItem={({item}) => <View>


       <RkCard style={{width:'75%', marginLeft: 50, marginBottom: 50, backgroundColor:'#f5f5f5'}}>

         <View rkCardContent>

         </View>
         <View rkCardFooter>

           <Text> Notes</Text>
         </View>

       </RkCard>


       </View>


     }

     keyExtractor={(item, index) => index.toString()}
     removeClippedSubviews

  />


     </ScrollView>
     </View>

此设置只允许动画在背景中播放，而内容位于其上方。我希望动画在内容中播放如下：

<View style = { styles.MainContainer }>

     <ScrollView>

        <FlatList

          data={ this.state.dataSource}

          ItemSeparatorComponent = {this.FlatListItemSeparator}


          renderItem={({item}) => <View>


          <View style={styles.coverContainer}>
      <ImageBackground
        source={{uri:`http://www.example.com/img/123.jpg`}}
        style={styles.coverImage}
      >
      </ImageBackground>
    </View>
    <View style={styles.ImageContainer}>

    </View>


          </View>


        }

        keyExtractor={(item, index) => index.toString()}
        removeClippedSubviews

     />

     <FlatList

       data={ this.state.image}

       ItemSeparatorComponent = {this.FlatListItemSeparator}


       renderItem={({item}) => <View>


       <RkCard style={{width:'75%', marginLeft: 50, marginBottom: 50, backgroundColor:'#f5f5f5'}}>

         <View rkCardContent>

         </View>
         <View rkCardFooter>
           <Animation
         progress={this.state.progress}
         source={require('../Animations/favourite_app_icon.json')}

         /> // Animation here
           <Text> Notes</Text>
         </View>

       </RkCard>


       </View>


     }

     keyExtractor={(item, index) => index.toString()}
     removeClippedSubviews

  />


     </ScrollView>
     </View>

我尝试将动画放在其他地方，但我仍然得到相同的结果。我的结论是它与ScrollView有关。对此有任何帮助表示赞赏！

更新问题不在于ScrollView，它与cardview有关，导致动画离开屏幕。