2016-07-27 12 views
2

私のReactネイティブアプリでWebViewの中にTwitterウィジェットをロードしようとしていますが、何らかの理由で私のJavascriptが動作していないようです。ReactネイティブでWebView内のTwitterウィジェット内の

Twitterスクリプトを非同期的に読み込んで(機能はfrom here)、ウィジェットを描画するためにスクリプトが読み込まれたときにtwttr.widgets.load()関数を実行しています。

デフォルトのWebviewコンポーネントでは不可能にしようとしていますか?ここで

は私のコードです:

render() { 
    let utils = ' \ 
     function loadScript(src, callback) { \ 
     var s, r, t; \ 
     r = false; \ 
     s = document.createElement("script"); \ 
     s.type = "text/javascript"; \ 
     s.src = src; \ 
     s.onload = s.onreadystatechange = function() { \ 
      if (!r && (!this.readyState || this.readyState == "complete")) { \ 
      r = true; \ 
      callback(); \ 
      } \ 
     }; \ 
     t = document.getElementsByTagName("script")[0]; \ 
     t.parentNode.insertBefore(s, t); \ 
     } \ 
    '; 

    let twitter = ' \ 
     loadScript("//platform.twitter.com/widgets.js", function() { \ 
     twttr.widgets.load(); \ 
     }); \ 
    '; 

    let JS = utils + twitter; 

    let source = '<blockquote class="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">8 TED Talks to inspire projects with kids: <a href="https://twitter.com/TEDTalks/status/758116657638309896">https://twitter.com/TEDTalks/status/758116657638309896</a> <a href="https://twitter.com/TEDTalks/status/758116657638309896">pic.twitter.com/HMmYAeP7Km</a></p>&mdash; TED Talks (@TEDTalks) <a href="https://twitter.com/TEDTalks/status/758116657638309896">27 de julio de 2016</a></blockquote>'; 

    return (
     <WebView 
     source={{html: source}} 
     javaScriptEnabled={true} 
     injectedJavascript={ JS } 
     /> 
    ); 
} 

答えて

2

WebViewの内部ロード・スクリプトが(私はなぜ知らない)動作していないように思え。だから私は、スクリプトのタグを使用してTwitterのスクリプトをロードし、それを自分のHTMLコードに連結する必要があります。

render() { 

    let JS = '<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>'; 

    let source = JS + '<blockquote class="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">8 TED Talks to inspire projects with kids: <a href="https://twitter.com/TEDTalks/status/758116657638309896">https://twitter.com/TEDTalks/status/758116657638309896</a> <a href="https://twitter.com/TEDTalks/status/758116657638309896">pic.twitter.com/HMmYAeP7Km</a></p>&mdash; TED Talks (@TEDTalks) <a href="https://twitter.com/TEDTalks/status/758116657638309896">27 de julio de 2016</a></blockquote>'; 

    return (
     <WebView 
     source={{html: source}} 
     javaScriptEnabled={true} 
     /> 
    ); 
} 
関連する問題