Expo React Native应用中lottie-react-native动画显示变形求助

问题背景 #

使用以下依赖版本时，lottie动画显示变形：

• expo: ~51.0.8
• lottie-react-native: 6.7.0

组件代码如下：

import { View, Text, TouchableOpacity } from 'react-native'
import React from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'
import { ICON, NumFormat, ThemedStatusBar } from '../../../components/global'
import { useNavigation } from '@react-navigation/native'
import LottieView from 'lottie-react-native'

const PaymentSuccess = (props) => {
    const data = props.route.params.payLoad
    const {navigate} = useNavigation()
    const makeReceipt =()=>{
   // data comes here
    }
    return (
        <SafeAreaView  className="bg-white dark:bg-gray-900 flex-1">
            <ThemedStatusBar />
            <View className="px-10 py-10 flex-row justify-between">
                <TouchableOpacity className="" onPress={()=>navigate("btTab")}>
                    <ICON type="Entypo" name="home" size={28} />
                </TouchableOpacity>
            </View>

            <View className="flex justify-center gap-y-8 px-8">

                <View className=" items-center justify-center pt-28 space-y-10">
                    <View className="h-32 w-32 rounded-full"> 
                        <LottieView autoPlay loop={false} source={require('../../../assets/lottie/transaction-completed.json')} style={{ height:"100%", width:"100%"}} />
                    </View>
          
                    <Text className="text-center font-InterBold text-2xl text-black dark:text-white">Transaction Successful</Text>
                </View>

                <View className="space-y-2 px-2">
                    <Text className="text-center font-InterSemibold text-sm text-black dark:text-white">Your Transfer of ₦{<NumFormat num={data.amount} />} is on its way to {data.res_name}</Text>
                    <Text className="text-center font-Inter text-xs  text-black dark:text-white">You will recieve confirmation shortly</Text>
                </View>


                <View className="py-16 mt-10 px-6">

                    <TouchableOpacity className="flex-row justify-center items-center rounded-2xl bg-brand1  dark:bg-brand3  px-12 py-3" onPress={() => makeReceipt()}>
                        <ICON type="MaterialIcons" name="receipt-long" size={24} color="white" />
                        <Text className='text-sm font-InterSemiBold text-white ml-2'>Share Reciept</Text>
                    </TouchableOpacity>

                </View>
            </View>
        </SafeAreaView>

    )
}

export default PaymentSuccess

动画变形效果截图：

解决方案 #

1. 设置LottieView的contentMode属性 #

默认情况下LottieView会拉伸填充容器导致变形，添加contentMode="contain"可保持动画原始宽高比：

<LottieView 
  autoPlay 
  loop={false} 
  source={require('../../../assets/lottie/transaction-completed.json')} 
  style={{ height:"100%", width:"100%"}}
  contentMode="contain"
/>

2. 匹配容器与动画的宽高比 #

父容器设置为h-32 w-32（正方形），若动画本身是长方形，强行放入会挤压变形：

• 调整容器宽高比，与动画原始尺寸一致
• 保留正方形容器，用contentMode="contain"让动画在容器内居中显示，避免拉伸

3. 移除圆角容器的影响 #

父容器的rounded-full会把正方形容器变成圆形，若动画非圆形会被裁剪挤压，可先移除该样式测试：

<View className="h-32 w-32"> {/* 去掉rounded-full */}
  <LottieView ... />
</View>

4. 验证依赖兼容性 #

执行npx expo install lottie-react-native，让Expo自动安装与当前版本适配的lottie-react-native版本。

内容的提问来源于stack exchange，提问作者Fegig