中文文档

Invoke functions between React Native and WebView directly

react-native-webview-bridge Support

Just like:

// Side A const answer = await ask(question) // Side B function ask(question) { return 'I don\'t know' }

Before using like that, you should firstly define the function you want to expose.

// Side A const ask = invoke.bind('ask') // Side B invoke.define('ask', ask)

$ npm install react-native-webview-invoke --save 

Requires：

• React Native >= 0.37

There are two sides: native and web.

Import

import createInvoke from 'react-native-webview-invoke/native'

Create invoke

class SomePage extends React.Component { webview: WebView invoke = createInvoke(() => this.webview) render() { // Note: add 'useWebKit' property for rn > 0.59 return <Webview useWebKit ref={webview => this.webview = webview} onMessage={this.invoke.listener} source={require('./index.html')} /> } }

Now, we can start to expose functions for Web, and get the function from Web. (See Start to use)

Import

import invoke from 'react-native-webview-invoke/browser'

Or use <script> in .html

<script src="./node_modules/react-native-webview-invoke/dist/browser.umd.js"></script> <script> var invoke = window.WebViewInvoke </script>

For better illumination, we define two sides named A and B. each of them can be React Native or Web, and if A is React Native, then B is Web.

Assume that there are some functions in A side.

function whatIsTheNameOfA() { return 'A' } function tellAYouArea(someone: string, prefix: string) { return 'Hi, ' + prefix + someone + '!' }

Expose them for B side.

invoke .define('whatIsTheNameOfA', whatIsTheNameOfA) .define('tellAYouArea', tellAYouArea)

OK, Go to the B side:

Firstly, bind some functions which exposed from A.

const whatIsTheNameOfA = invoke.bind('whatIsTheNameOfA') const tellAYouArea = invoke.bind('tellAYouArea')

Now, we can use them.

await whatIsTheNameOfA() // 'A' await tellAYouArea('B', 'Mr.') // 'Hi, Mr.B'

In addition, you can use them without definition too.

await invoke.fn.whatIsTheNameOfA() // 'A' await invoke.fn.tellAYouArea('B', 'Mr.') // 'Hi, Mr.B'

(RN only) create invoke with the Webview instance.

Args:

• getWebViewInstance [() => React.WebView] getter for Webview instance

Return:

• invoke [invoke] invoke object

expose function to another side.

Args:

• name [string] function name
• fn [Function]

get function from another side

Args:

• name [string] function name

Return:

[(...args: any[]) => Promise<any>] function

All functions that defined at the other side

Usage

// A side invoke.define('test', test) // B side invoke.fn.test()

(RN only) the handler for the onMessage property of WebView element.

Usage:

<WebView onMessage={invoke.listener} />