如何在WebView中的注入的javascript中运行React本机代码？

Question

I have a react native function that downloads video by the help of "rn-fetch-blob" and save to document directory which is working fine.

I want to achieve this functionality by the help of webview as it runs in code in separate thread.

Below is my code:

    downloadVideo() {
        let videoPathToDownload = 'http://XXXXXXXXXXX/0fgqhjcr6my.mp4';
        RNFetchBlob
            .config({
                fileCache: true,
                appendExt: 'mp4'
            })
            .fetch('GET', videoPathToDownload)
            .then((res) => {
                console.log('The file saved to ', res.path())
            })
    }


    render() {
        return (
            <View style={{flex: 1}}>
            <WebView
                javaScriptEnabled={true}
                domStorageEnabled={true}
                injectedJavaScript={}
                source={{ uri: "https://www.google.com" }} 
                style={{ marginTop: 20  }} 
             />
            </View>
        );
    }

I want to call the downloadVideo() function from webview inside injectedJS or by any means possible.

Please Help.

Answer 1

Use react native WebView:

<WebView
    ref={(ref) => { this.webview = ref; }}
    source={{ uri: this.state.webViewUrl }}
    originWhitelist={['*']}
    javaScriptEnabledAndroid={true}
    injectedJavaScript={jsCode}
    onMessage={this._onMessage} // only if you want connection back
/>

and you can pass js code:

const jsCode = `
    document.querySelector('button').addEventListener("click", function() {  
        alert('Hello Web')
    }); 
    true;
    `