Lottie动画无法在CardView中正常显示的问题排查

我帮你梳理下这个问题的排查方向和解决方案，你提到动画在ScrollView外正常，但放进RkCard的footer就偏移，且已经排除了ScrollView的影响，那大概率是RkCard的布局约束或者组件配置导致的，试试下面几个方法：

1. 给Lottie Animation添加明确的尺寸约束 #

RkCard的footer容器可能没有给子元素默认的尺寸限制，导致Lottie动画使用了自身的原始尺寸（可能很大），从而偏移出屏幕。给Animation组件加上固定的width和height，同时设置对齐方式：

<View rkCardFooter>
  <Animation
    progress={this.state.progress}
    source={require('../Animations/favourite_app_icon.json')}
    style={{ width: 24, height: 24, alignSelf: 'center' }} // 明确尺寸和对齐
  />
  <Text> Notes</Text>
</View>

2. 暂时禁用FlatList的removeClippedSubviews属性 #

你给FlatList设置了removeClippedSubviews来优化性能，但这个属性有时候会干扰动态渲染的组件（比如Lottie动画），导致视图渲染异常。先注释掉这个属性测试：

<FlatList
  data={this.state.image}
  ItemSeparatorComponent={this.FlatListItemSeparator}
  renderItem={({item}) => (/* ...你的Card代码... */)}
  keyExtractor={(item, index) => index.toString()}
  // removeClippedSubviews // 先注释掉这个属性，看动画是否正常
/>

3. 调整RkCard Footer的布局方向 #

RkCard的footer默认可能是垂直布局，或者没有设置flex方向，导致动画和文本的排版混乱。给footer的View加上flex布局配置：

<View rkCardFooter style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10 }}>
  <Animation
    progress={this.state.progress}
    source={require('../Animations/favourite_app_icon.json')}
    style={{ width: 24, height: 24, marginRight: 8 }}
  />
  <Text> Notes</Text>
</View>

4. 给Lottie动画设置resizeMode #

如果你的Lottie动画文件本身的画布尺寸很大，即使设置了组件尺寸，也可能出现偏移。添加resizeMode="contain"让动画适配组件容器：

<Animation
  progress={this.state.progress}
  source={require('../Animations/favourite_app_icon.json')}
  style={{ width: 24, height: 24 }}
  resizeMode="contain"
/>

你可以按照这个顺序逐个测试，应该能解决动画偏移的问题～

内容的提问来源于stack exchange，提问作者Andrew I.