react type script function execute by name

어떻게하는거야 ㅠㅠ

 

import React, {useRef, RefObject, MutableRefObject, useState} from 'react';

import {StatusBar, Text} from 'react-native';

import {WebView} from 'react-native-webview';

 

const sampleHtml = require('./sample/index.html');

 

const App = () => {

  const webViewRef = useRef<WebView>(null);

  const [text, setText] = useState<string>();

 

  // /**

  //  * 화면에서 post를 던지면 react-native에서 받음

  //  */

  // const handleMessage = (event: any) => {

  //   console.log('onWebViewMessage', JSON.parse(event.nativeEvent.data));

  //   let msgData;

  //   try {

  //     msgData = JSON.parse(event.nativeEvent.data) || {};

  //     console.log('TCL: onWebViewMessage -> msgData', msgData);

  //   } catch (error) {

  //     console.error(error);

  //     return;

  //   }

  //   // this[msgData.targetFunc].apply(this, [msgData]);

  // };

 

  // /**

  //  * 영화목록을 받아와서 화면에 전달한다.

  //  */

  // const getMovieList = msgData => {

  //   webViewRef.current?.postMessage(JSON.stringify(msgData), '*');

  // };

 

  const handleDataReceived = (msgData: any) => {

    setText(msgData.data);

 

    msgData.isSuccessfull = true;

    msgData.args = [msgData.data % 2 ? 'green' : 'red'];

    webViewRef.current?.injectJavaScript(

      `window.postMessage('${JSON.stringify(msgData)}', '*');`,

    );

  };

 

  /**

   * 화면에서 post를 던지면 react-native에서 받음

   */

  const handleMessage = (event: any) => {

    console.log('Message received from webview');

 

    let msgData;

    try {

      msgData = JSON.parse(event.nativeEvent.data);

    } catch (err) {

      console.warn(err);

      return;

    }

    this[msgData.targetFunc]();

 

    switch (msgData.targetFunc) {

      case 'handleDataReceived':

        globalThis[msgData.targetFunc]([msgData]);

        break;

    }

  };

 

  return (

    <>

      <StatusBar />

      <Text>{text}</Text>

      <WebView

        ref={webViewRef}

        originWhitelist={['*']}

        source={{uri: sampleHtml}}

        javaScriptEnabled

        onMessage={handleMessage}

      />

    </>

  );

};

 

// const styles = StyleSheet.create({

//   scrollView: {

//     backgroundColor: Colors.lighter,

//   },

//   engine: {

//     position: 'absolute',

//     right: 0,

//   },

//   body: {

//     backgroundColor: Colors.white,

//   },

//   sectionContainer: {

//     marginTop: 32,

//     paddingHorizontal: 24,

//   },

//   sectionTitle: {

//     fontSize: 24,

//     fontWeight: '600',

//     color: Colors.black,

//   },

//   sectionDescription: {

//     marginTop: 8,

//     fontSize: 18,

//     fontWeight: '400',

//     color: Colors.dark,

//   },

//   highlight: {

//     fontWeight: '700',

//   },

//   footer: {

//     color: Colors.dark,

//     fontSize: 12,

//     fontWeight: '600',

//     padding: 4,

//     paddingRight: 12,

//     textAlign: 'right',

//   },

// });

 

export default App;