React native - webview - загрузка файлов js - PullRequest
Новая
       31

React native - webview - загрузка файлов js

1 голос
/ 02 апреля 2019

Мне нужно загружать JS динамически (зависит от предпочтений пользователя, поэтому не может жестко запрограммировать все в index.html), но есть проблема с этим в моем приложении.

Сценарий 1 работает как чудо:

index.html 

<html>
  <head>
  </head>
  <body>
    <h1>Highcharts webview demo</h1>
    <div id="container" style="width:100%; height:500px;"></div>
    <script type="text/javascript" src="library.js"></script>
    <script>
      library works
    </script>
  </body>
</html>

app 

const webapp2 = require('../web/index.html')

render() {
return <View>
      <WebView
        source={webapp2}
        originWhitelist={'["*"]'}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={true}
        scrollEnabled={false}
      />
</View>
}

Но когда я пытаюсь сделать это с помощью htmlв источнике у меня отсутствует библиотека JS.

Сценарий 2 - не работает

app 

  render() {

    // Create container for the chart
    return <View style={styles.container}>
      <WebView
        source={{html:`<html><head><script type="text/javascript" src="library.js"></script></head><body><div id="container" style="width:100%; height:500px;"></div><script>Library does not exist yet</script></body></html>`, baseUrl: 'web/'}}
        originWhitelist={'["*"]'}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={true}
        scrollEnabled={false}
      />
    </View>
  }

Я хотел бы избежать использования внешних библиотек для загрузки файлов js.

1 Ответ

0 голосов
/ 03 апреля 2019

Сначала загрузите файл index.html в соответствии с вашим сценарием 1. Затем возьмите ссылку на компонент webview.После того, как webview загрузит файл index.html, мы можем добавить javascript для загрузки js-файла, как показано ниже: 

<WebView
    ref={ref => (this.webview = ref)}
    source={webapp2}
    originWhitelist={'["*"]'}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    scalesPageToFit={true}
    scrollEnabled={false}
    onLoad={() => { this.injectJSFileFromWeb(); }}
/>

, вы можете вызывать эту функцию всякий раз, когда хотите загрузить js-файл.но убедитесь, что в webview загружен html. 

injectJSFileFromWeb() {
    //give the filename according to your need
    var jsFileName = "library2.js";
    var fp = `
        var corescript = document.createElement('script');
        corescript.type = 'text/javascript';
        corescript.src = "${jsFileName}";
        var parent = document.getElementsByTagName('head').item(0);
        parent.appendChild(corescript);
        void(0);
    `;
    this.webview.injectJavaScript(fp);
}

Примечание: проверено только на Android.

...