React Native Lottie设计的高度和宽度不符合风格

m1m5dgzv  于 2023-03-31  发布在  React
关注(0)|答案(3)|浏览(240)

我在这里使用了lottie设计和style属性,问题是当我设置width时,它也改变了它的height

<LottieView 
    style={{width:200}
    source={require('../../../assests/lottie/test.json')}
    autoPlay
    loop
/>

请告诉我怎样才能把它 Package 成固定的高度和宽度。

b91juud3

b91juud31#

我们可以在Lottie组件中设置高度和宽度,就像在View组件中设置样式一样。
我们可以简单地在Lottie组件中设置高度或宽度如下:

<LottieView 
    style={{ height: 200 }}
    source={require('../../../assests/lottie/test.json')}
    autoPlay
    loop
/>

更多详情请查看官方文档:
https://github.com/lottie-react-native/lottie-react-native

ve7v8dk2

ve7v8dk22#

---React Native Solution----

对我有用的方法是使用视图环绕Lottie组件,并使用transform属性缩放它以移除填充。

<View style={styles().lottie}>
    <Lottie
      style={[
        {
          transform: [{scale: 1.8}],
        },
      ]}
      source={require('../../../assets/lottie/heartbeat-loading.json')}
      autoPlay
      loop
      resizeMode="cover"
    />
  </View> 

const styles = () =>
  StyleSheet.create({
    lottie: {
      width: dimensions.Width / 5,
      height: dimensions.Width / 5,
    },
  });
u4dcyp6a

u4dcyp6a3#

当您使用样式属性设置LottieView的width属性时,动画的高度将自动调整以保持其纵横比。
要以固定的高度和宽度 Package LottieView,可以将其 Package 在View容器中。

<View style={{ width: 200, height: 200 }}>
  <LottieView
    style={{ flex: 1 }}
    source={require('../../../assests/lottie/test.json')}
    autoPlay
    loop
  />
</View>

相关问题