2

我很难在我想要的地方显示 Lottie 动画。到目前为止，我能够像这样在外面显示它：

<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，它导致动画离开屏幕。

4

0 回答 0