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
$ git clone git@github.com:pinqy520/react-native-webview-invoke.git
$ cd react-native-webview-invoke/examples/InvokeTest
$ react-native run-ios
Or open the iOS Xcode project under examples/InvokeTest/ios
folder, and run.
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() {
return <Webview
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 theWebview
instance.
Args:
- getWebViewInstance [
() => React.WebView
] getter forWebview
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 ofWebView
element.
Usage:
<WebView onMessage={invoke.listener} />