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

Question

有没有办法将 [Lottie View]https://github.com/react-native-community/lottie-react-native 上的命令式 API 与功能组件一起使用？

我正在使用 Lottie View 组件，如下所示。我想要一种简单的方法来调用 play() 和 stop() 方法。我希望有一种方法可以在不将此组件转换为类的情况下做到这一点。

const GameInterface: React.FunctionComponent<GameInterfaceProps> = () => {
    return (
        <LottieView
            source={require('./Data/data.json')}
        />
    );
};

谢谢！

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

}