Invoke functions between React Native and WebView directly
npm install 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
``
$ npm install react-native-webview-invoke --save
Requires:
- React Native >= 0.37
There are two sides: native and web.
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
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
` javascript`
import invoke from 'react-native-webview-invoke/browser'
Or 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.
` 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'
> (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 nameFunction
- fn []
> get function from another side
Args:
- name [string] function name
Return:
[(...args: any[]) => Promise] function
> All functions that defined at the other side
Usage
` javascript
// A side
invoke.define('test', test)
// B side
invoke.fn.test()
`
> (RN only) the handler for the onMessage property of WebView element.
Usage:
` javascript``