Twitter-Widget in WebView in React Native

Question

Ich versuche, ein Twitter-Widget in einem WebView in meiner React Native App zu laden, aber es scheint, dass meine injizierten Javascript aus irgendeinem Grund nicht funktioniert.

Was ich tue ist Laden von Twitter-Skript asynchron (Funktion genommen from here), dann Ausführen twttr.widgets.load() Funktion, wenn Skript geladen wird, um das Widget zu zeichnen.

Ist es möglich, oder versuche ich ein unmögliches mit Webview Komponente?

Hier ist mein Code:

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 } 
     /> 
    ); 
} 

Answer 1

Es ist wie Lade Skripte scheint innerhalb einer WebView nicht funktioniert (ich weiß nicht, warum). Um es funktionieren zu lassen, muss ich das Twitter-Skript mit dem Skript-Tag laden und mit meinem HTML-Code verketten.

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} 
     /> 
    ); 
}