react-native-webview-invoke

中文文档

Invoke functions between React Native and WebView directly

react-native-webview-bridge Support

Just like:

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

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

1// Side A
2const ask = invoke.bind('ask')
3
4// Side B
5invoke.define('ask', ask)

Installation

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

Requires：

• React Native >= 0.37

Basic Usage

There are two sides: native and web.

React Native Side

Import

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

Create invoke

1class SomePage extends React.Component {
2    webview: WebView
3    invoke = createInvoke(() => this.webview)
4    render() {
5        // Note: add 'useWebKit' property for rn > 0.59
6        return <Webview useWebKit
7            ref={webview => this.webview = webview}
8            onMessage={this.invoke.listener}
9            source={require('./index.html')}
10            />
11    }
12}

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

Web Side

Import

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

Or use <script> in .html

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

Start to use

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.

1function whatIsTheNameOfA() {
2    return 'A'
3}
4
5function tellAYouArea(someone: string, prefix: string) {
6    return 'Hi, ' + prefix + someone + '!'
7}

Expose them for B side.

1invoke
2    .define('whatIsTheNameOfA', whatIsTheNameOfA)
3    .define('tellAYouArea', tellAYouArea)

---

OK, Go to the B side:

Firstly, bind some functions which exposed from A.

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

Now, we can use them.

1await whatIsTheNameOfA()
2// 'A'
3await tellAYouArea('B', 'Mr.')
4// 'Hi, Mr.B'

In addition, you can use them without definition too.

1await invoke.fn.whatIsTheNameOfA()
2// 'A'
3await invoke.fn.tellAYouArea('B', 'Mr.')
4// 'Hi, Mr.B'

API

createInvoke(getWebViewInstance)

(RN only) create invoke with the Webview instance.

Args:

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

Return:

• invoke [invoke] invoke object

invoke.define(name, fn)

expose function to another side.

Args:

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

invoke.bind(name)

get function from another side

Args:

• name [string] function name

Return:

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

invoke.fn

All functions that defined at the other side

Usage

1// A side
2invoke.define('test', test)
3
4// B side
5invoke.fn.test()

invoke.listener

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

Usage:

1<WebView onMessage={invoke.listener} />