将命令式API与功能组件一起使用

时间:2020-05-23 20:23:14

标签: react-native lottie

是否可以通过功能组件使用[Lottie View] https://github.com/react-native-community/lottie-react-native上的命令式API?

我正在如下使用Lottie View组件。我想要一种简单的方法来调用play()和stop()方法。我希望有一种方法可以将其转换为类。

Loading libraries, please wait...

谢谢!

1 个答案:

答案 0 :(得分:1)

 // TODO: add an explanation


 const GameInterface = (props: {lottieViewRef: (ref: any) => void}) => {

    return (
        <LottieView
            source={require('./Data/data.json')}
            ref={(ref) => props.lottieViewRef(ref)}
        />
    );
};


const YouApp = () => {

    const gameRef = useRef(null);      

    return (
      <View style={styles.myBeautifullStyle}>
         <GameInterface 
           lottieViewRef={(ref) => gameRef = ref} 
         />
         <Button 
           onClick={() => gameRef.play()}
         />    
      </View>
    );

}