React Native - вызов Webview React Native function

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 

} 

Для вызова нативного метода, используйте это только вызвать навигационное событие WebView и вставлять информацию о вызове функции в URL.

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

Answer 2

да это возможно, это Existe пакет для этого react-native-webview-bridge. Я использовал его в производстве, и он отлично работает.

Answer 3

Вы можете придать яваскрипт функцию в WebView на нагрузке, а затем использовать OnMessage, чтобы получить ответ от функции, которую вы вводили больше информации IN Here

Answer 4

Я не уверен, но мое мнение -

Вы можете не. Webview может загружать только часть js, которую мы можем определить в компоненте Webview. Это полностью отдельный, чем другие компоненты, это всего лишь зона просмотра.