如何在 React-Native 中使用帶有箭頭功能的 Lottie Json 文件

Question

如何在 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;

Answer 1

這不是您編寫功能組件的方式

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

您不必在其中創建渲染函數，請嘗試以下操作

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

Answer 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;