中文文档

react-native-webview-invoke 中文文档

react-native-webview-invoke 可用来让React Native和WebView中的函数可以互相调用。

react-native-webview-bridge支持

例如：

// 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)

运行Demo

$ 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的

React Native 侧初始化

引入

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端的方法。（详情看后面）

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'

API

createInvoke(getWebViewInstance)

（仅用于React Native侧）根据Webview实例创建invoke

参数：

• getWebViewInstance [() => React.WebView] 获取实例

返回值

• invoke [invoke] invoke对象

invoke.define(name, fn)

定义暴露给另一侧的方法

参数：

• name [string] 方法名称
• fn [Function] 方法

invoke.bind(name)

获得另一侧暴露的方法

参数

• name [string] 方法名称

返回值

[(...args: any[]) => Promise<any>] 返回的方法

invoke.fn

另一侧提供给本册的所有方法

用法

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

// B side
invoke.fn.test()

invoke.listener

（仅用于React Native侧）提供给WebView组件的onMessage方法

用法

<WebView onMessage={invoke.listener} />

开发者

$ npm run dev

1. 打开dev/ios文件夹的工程文件。
2. 在src文件夹中开发
3. 开发完成npm run build
4. Reload