如何在Webview中注入的javascript中运行React本机代码?

时间:2019-02-27 06:28:09

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

我有一个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>
        );
    }

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

请帮助。

1 个答案:

答案 0 :(得分:0)

使用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
/>

您可以传递js代码:

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