Анимация Lottie не отображается в CardView? - PullRequest
Новая
       39

Анимация Lottie не отображается в CardView?

0 голосов
/ 12 мая 2018

Я недавно попал в Лотти, и мне это до сих пор нравится.Мне просто трудно показывать анимацию там, где я хочу.Пока что я могу отображать его снаружи так: 

<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, а в просмотре карты, из-за которой анимация отключается от экрана.

...