中文文档
react-native-webview-invoke 可用来让React Native和WebView中的函数可以互相调用。
例如：
// Side A
const answer = await ask(question)
// Side B
function ask(question) { return 'I don\'t know' }当然，在这样使用之前，你必须定义哪些方法能够让别人调用：
// Side A
const ask = messager.bind('ask')
// Side B
messager.define('ask', ask)
$ git clone git@github.com:pinqy520/react-native-webview-invoke.git
$ cd react-native-webview-invoke/examples/InvokeTest
$ react-native run-ios
或者直接打开 examples/InvokeTest/ios 目录下的工程，点击执行。
$ npm install react-native-webview-invoke --save
环境需求：
- React Native >= 0.37
分两个部分：React Native的和Web的
引入
import createInvoke from 'react-native-webview-invoke/native'初始化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')}
/>
}
}然后就可以开始定义向native暴露哪些方法以及定义web端的方法。（详情看后面）
引入
import invoke from 'react-native-webview-invoke/browser'或者使用<script>标签引入
<script src="./node_modules/react-native-webview-invoke/dist/browser.umd.js"></script>
<script>
var invoke = window.WebViewInvoke
</script>为了方便说明，定义一下A和B两侧，如果A是React Native侧那么B就是Web侧，反之亦然。
假设A中有一些方法。
function whatIsTheNameOfA() {
return 'A'
}
function tellAYouArea(someone: string, prefix: string) {
return 'Hi, ' + prefix + someone + '!'
}暴露这些方法给B
invoke
.define('whatIsTheNameOfA', whatIsTheNameOfA)
.define('tellAYouArea', tellAYouArea)好了，现在到B侧：
首先定义B需要调用A里面哪些方法。
const whatIsTheNameOfA = invoke.bind('whatIsTheNameOfA')
const tellAYouArea = invoke.bind('tellAYouArea')好了，现在就可以在B中调用A中的方法了
await whatIsTheNameOfA()
// 'A'
await tellAYouArea('B', 'Mr.')
// 'Hi, Mr.B'当然，在B侧也可以不用定义，直接使用
await invoke.fn.whatIsTheNameOfA()
// 'A'
await invoke.fn.tellAYouArea('B', 'Mr.')
// 'Hi, Mr.B'（仅用于React Native侧）根据
Webview实例创建invoke
参数：
- getWebViewInstance [
() => React.WebView] 获取实例
返回值
- invoke [
invoke] invoke对象
定义暴露给另一侧的方法
参数：
- name [
string] 方法名称 - fn [
Function] 方法
获得另一侧暴露的方法
参数
- name [
string] 方法名称
返回值
[(...args: any[]) => Promise<any>] 返回的方法
另一侧提供给本册的所有方法
用法
// A side
invoke.define('test', test)
// B side
invoke.fn.test()（仅用于React Native侧）提供给
WebView组件的onMessage方法
用法
<WebView onMessage={invoke.listener} />$ npm run dev
- 打开
dev/ios文件夹的工程文件。 - 在src文件夹中开发
- 开发完成
npm run build Reload