React Native 中 WebView 中的 Twitter 小部件 [英] Twitter widget inside WebView in React Native

问题描述

我正在尝试在 React Native 应用程序的 WebView 中加载 Twitter 小部件，但似乎我注入的 Javascript 由于某种原因不起作用.

I'm trying to load a Twitter widget inside a WebView in my React Native app, but it seems that my injected Javascript is not working for some reason.

我正在做的是异步加载 Twitter 脚本(从此处获取的函数)，然后执行twttr.widgets.load() 脚本加载时的函数，以便绘制小部件.

What I'm doing is loading Twitter script asynchronously (function taken from here), then executing twttr.widgets.load() function when script is loaded in order to draw the widget.

是否可以做到，或者我是否尝试使用默认的 Webview 组件来实现不可能?

Is it possible to do it, or am I trying an impossible with default Webview component?

这是我的代码:

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

推荐答案

似乎在 WebView 中加载脚本不起作用(我不知道为什么).因此，为了使其工作，我需要使用脚本标记加载 Twitter 的脚本并将其连接到我的 HTML 代码.

It seems like loading scripts inside a WebView is not working (I don't know why). So to make it work, I need to load Twitter's script using script tag and concatenating it to my HTML code.

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

这篇关于React Native 中 WebView 中的 Twitter 小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！