React native React Native：如何添加全屏乐天动画

我使用的是lottie的线性渐变，代码在ios上运行良好，但在android上它不适合全屏显示，渐变和视图之间有某种填充。 在ios上，它运行良好…我尝试了很多方法， 购买包括填充到0，甚至保证金到-20，但没有任何效果…有解决方案吗？

---

您缺少的是resizeMode，它没有在文档页面上指定，但是如果您查看源代码，就会找到它

如果您不想损失一些像素，这里有一些方法可以发挥作用：

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Dimensions
} from 'react-native';
import LottieView from 'lottie-react-native';
import { anim } from './assets/animation.json';

const { height, width } = Dimensions.get('window')

export default class App extends Component {
  componentDidMount() {
    this.animation.play();
  }

  render() {
    return (
      <View style={styles.container}>
          <LottieView
            ref={animation => {
              this.animation = animation;
            }}
            style={{
              width: width + 10,
              height: height,
              marginLeft: - 5
            }}
            resizeMode='cover'
            loop={true}
            source={anim}
          />
       </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
    flex: 1,
  },
});

---

请注意，自从我尝试使用此工具以来，我导出资产的方式有点不同，出于某种原因，他们不喜欢JSON文件您缺少的是resizeMode，它没有在文档页面上指定，但是如果查看源代码，您会找到它

如果您不想损失一些像素，这里有一些方法可以发挥作用：

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Dimensions
} from 'react-native';
import LottieView from 'lottie-react-native';
import { anim } from './assets/animation.json';

const { height, width } = Dimensions.get('window')

export default class App extends Component {
  componentDidMount() {
    this.animation.play();
  }

  render() {
    return (
      <View style={styles.container}>
          <LottieView
            ref={animation => {
              this.animation = animation;
            }}
            style={{
              width: width + 10,
              height: height,
              marginLeft: - 5
            }}
            resizeMode='cover'
            loop={true}
            source={anim}
          />
       </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
    flex: 1,
  },
});

---

请注意，自从我尝试使用此工具以来，我导出资产的方式有点不同，并且出于某些原因，他们不喜欢JSON文件，因此第一个答案提出了一个重要问题，添加resizeMode=cover

但这还不够，如果你在不同大小的屏幕上进行测试，你可能仍然会发现不需要的边距和空格。我也有这个问题,

以下是简单的解决方案：

获取乐透文件的尺寸，例如300 X 600 仅设置宽度，然后使用aspectRatio确定高度。必须 必须设置flexGrow=1 e、 g

{this.animation=animation；}} source={require'./assets/animation.json'} 自动播放={false} 循环={false}

---

/> 因此，第一个答案提出了一个重要的观点，即添加resizeMode=cover

但这还不够，如果你在不同大小的屏幕上进行测试，你可能仍然会发现不需要的边距和空格。我也有这个问题,

以下是简单的解决方案：

获取乐透文件的尺寸，例如300 X 600 仅设置宽度，然后使用aspectRatio确定高度。必须 必须设置flexGrow=1 e、 g

{this.animation=animation；}} source={require'./assets/animation.json'} 自动播放={false} 循环={false}

---

/>您介意同时发布动画吗？@ovidb更新了我的问题您介意同时发布动画吗？@ovidb更新了我的问题我通过复制您的代码获得了蓝屏…可能这在使用expo和cli时有一些不同的行为…在您使用expo的情况下，您是否创建了/assets/animation.json.js文件粘贴了我在回答的末尾写的代码？也在android设备上测试过，我遇到了你提到的问题这里是一个工作示例，也许你想玩一下边距，我注意到一些奇怪的边界。ResizeMode对我有效，这在文档页面上没有指定我通过复制代码获得蓝屏…可能这是在使用expo和cli时有一些不同的行为…在您使用expo的情况下，您是否创建了/assets/animation.json.js文件，并在我的答案末尾粘贴了代码？也在android设备上测试过，我遇到了你提到的问题这里是一个工作示例，也许你想玩一下边距，我注意到一些奇怪的边界。ResizeMode对我有效，文档页面上没有指定它

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Dimensions
} from 'react-native';
import LottieView from 'lottie-react-native';
import { anim } from './assets/animation.json';

const { height, width } = Dimensions.get('window')

export default class App extends Component {
  componentDidMount() {
    this.animation.play();
  }

  render() {
    return (
      <View style={styles.container}>
          <LottieView
            ref={animation => {
              this.animation = animation;
            }}
            style={{
              width: width + 10,
              height: height,
              marginLeft: - 5
            }}
            resizeMode='cover'
            loop={true}
            source={anim}
          />
       </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
    flex: 1,
  },
});