React-Native中如何结合箭头函数使用Lottie Json文件

错误原因 #

类组件需要声明render()方法返回UI结构，但是函数式组件（箭头函数实现的组件）本身就相当于类组件的render方法，你的错误代码中多写了render(); {这行无效语法，直接导致运行报错。

修复后可正常运行的代码 #

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

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

你也可以省略return的括号，简化写法：

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

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

可选优化配置 #

如果需要调整动画尺寸、控制播放状态，可以加对应属性：

<LottieView
  source={require('./lotties/rocket.json')}
  autoPlay
  loop={false} // 只播放一次
  style={{ width: 300, height: 300 }} // 控制动画大小
  speed={1.5} // 调整播放速度
/>

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