react-native-webview-invoke

中文文档


> Invoke functions between React Native and WebView directly

react-native-webview-bridge Support

Just like:

`` javascript
// 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.

` javascript
// Side A
const ask = invoke.bind('ask')

// Side B
invoke.define('ask', ask)
`

!rnwm

Installation

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

Requires：

- React Native >= 0.37

Basic Usage

There are two sides: native and web.

$3

Import

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

Create invoke

` javascript
class SomePage extends React.Component {
webview: WebView
invoke = createInvoke(() => this.webview)
render() {
// Note: add 'useWebKit' property for rn > 0.59
return 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)

$3

Import

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

Or use

`

$3

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.

` javascript
function whatIsTheNameOfA() {
return 'A'
}

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

Expose them for B side.

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

---

OK, Go to the B side:

Firstly, bind some functions which exposed from A.

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

Now, we can use them.

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

In addition, you can use them without definition too.

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

API

$3

> (RN only) create invoke with the Webview instance.

Args:

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

Return:

- invoke [invoke] invoke object

$3

> expose function to another side.

Args:

- name [string] function name
- fn [Function]

$3

> get function from another side

Args:

- name [string] function name

Return:

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

$3

> All functions that defined at the other side

Usage

` javascript
// A side
invoke.define('test', test)

// B side
invoke.fn.test()
`

$3

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

Usage:

` javascript

``