React Native WebView内的Twitter小部件

Question

我正在尝试WebView在我的React Native应用程序中加载一个Twitter小部件，但是似乎由于某些原因我注入的Javascript无法正常工作。

我正在做的是异步加载Twitter脚本（函数从此处获取），然后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 }
      />
    );
}

Answer 1

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