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

Question

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

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

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 YourApp = () => {

    let gameRef = useRef(null);      

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

}

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

Using Imperative API with functional component

react-native

lottie