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