如何在 React-Native 中使用带有箭头功能的 Lottie Json 文件答案

【问题标题】：How to use Lottie Json file with arrow function in React-Native如何在 React-Native 中使用带有箭头功能的 Lottie Json 文件
【发布时间】：2021-08-27 12:06:15
【问题描述】：

如何在 React-Native 中使用 lottie Jason 文件和箭头函数

这段代码正常工作

import React from 'react';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  render() {
    
    return (
 
    <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
 
    )
  }
}

但是这段代码不工作它给出了错误。如何使用带箭头功能的 LottieView

import React from 'react';
import LottieView from 'lottie-react-native';

const App = () => {
  render(); {
    return(
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    );
  }
}
export default App;

【问题讨论】：

标签： android react-native lottie

【解决方案1】：

这不是你编写函数式组件的方式

const App = () => {
  render(); {
    return(
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    );
  }
}

你不必在里面创建一个渲染函数，试试下面的

const App = () => {
    return(
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    );
}

【讨论】：

【解决方案2】：

我会尝试将它嵌套在一个视图中，然后给它一个高度和一个宽度可能......

而且，您不需要在功能组件中进行渲染。

import React from 'react';
import LottieView from 'lottie-react-native';
    
const App = () => {
    
  return(
    <View style={{height: '100%', width: '100%'}}>
      <LottieView source={require('./lotties/rocket.json')} autoPlay loop />
    </View>
   );

}

export default App;

【讨论】：