如何在 webview 中注入的 javascript 中运行反应本机代码？答案

【问题标题】：How to run react native code inside injected javascript in webview?如何在 webview 中注入的 javascript 中运行反应本机代码？
【发布时间】：2019-02-27 06:28:09
【问题描述】：

我有一个 react native 函数，它通过“rn-fetch-blob”下载视频并保存到工作正常的文档目录。

我想通过 webview 的帮助来实现这个功能，因为它在单独的线程中的代码中运行。

下面是我的代码：

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

我想从injectJS 中的webview 调用downloadVideo() 函数或通过任何可能的方式。

请帮忙。

【问题讨论】：

标签： javascript react-native webview redux hybrid-mobile-app

【解决方案1】：

使用 react 原生的 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
/>

你可以通过js代码：

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

【讨论】：