javascript - React Native - Webview 调用 React Native 函数

Question

是否可以在 WebView 中创建一个函数？组件，触发 React Native 功能？

Answer 1

这是可能的，但我不确定这是否是唯一的方法。

基本上你可以设置 onNavigationStateChange事件处理程序，并在导航 url 中嵌入函数调用信息，这是该概念的示例。

在 React Native 上下文中

render() {

    return <WebView onNavigationStateChange={this._onURLChanged.bind(this)} />
}

_onURLChanged(e) {

    // allow normal the natvigation
    if(!e.url.startsWith('native://'))
        return true
    var payload = JSON.parse(e.url.replace('native://', ''))
    switch(e.functionName) {
        case 'toast' :
            native_toast(e.data)
        break
        case 'camera' :
            native_take_picture(e.data)
        break
    }
    // return false to prevent webview navitate to the location of e.url
    return false

}

要调用 native 方法，只需触发 webview 的导航事件并将函数调用信息嵌入 URL 中即可。

window.location = 'native://' + JSON.stringify({ 
    functionName : 'toast', data : 'show toast text' 
})