React Native 中 WebView 内的 Twitter 小部件

Question

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

我正在做的是异步加载 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 }
      />
    );
}

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