Реагировать на загрузку динамического содержимого в веб-просмотр

Question

В настоящее время я загружаю html-файл из папки ресурсов Android в webview.

Файл dashboard.html содержит несколько скриптов. если он статический, он работает нормально.

<WebView
  ref={(component) => (this.webview = component)}
  style={{ height: height * 1.3 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  source={{uri:'file:///android_asset/graph/pages/dashboard.html'}}
  startInLoadingState={true}
  javaScriptEnabledAndroid={true}
  mixedContentMode={'compatibility'}
/>

Но мне нужно динамически обновить переменную в моем скрипте. Как я могу получить доступ к сценариям, размещенным в папке активов, из реактивного компонента.

Answer 1

Вы не можете получить доступ к файлу скрипта и обновить его, но, возможно, вы можете запустить свой скрипт или дополнительный код после загрузки WebView с помощью injectedJavaScript prop

Пример:

const injectedJs = `
    alert("My custom code will go here!");
`;

return (
    <WebView
    ref={(component) => (this.webview = component)}
    style={{ height: height * 1.3 }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    source={{uri:'file:///android_asset/graph/pages/dashboard.html'}}
    startInLoadingState={true}
    javaScriptEnabledAndroid={true}
    mixedContentMode={'compatibility'}
    injectedJavaScript={injectedJs}
    javaScriptEnabledAndroid={true}
    />
);