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

Question

如何在React-Native中使用带有箭头函数的lottie Jason File

这段代码工作正常

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;

Answer 1

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

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

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;

Answer 2

这不是你编写功能组件的方式

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

您不必在其中创建渲染函数，尝试以下方法

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

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

How to use Lottie Json file with arrow function in React-Native

android

react-native

lottie