中文文档

黄祺 edited this page Feb 10, 2017 · 10 revisions

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)

rnwm

运行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>

开始使用

为了方便说明,定义一下AB两侧,如果AReact 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
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.