Question

我正在尝试在我的React Native应用程序中的var jsonFormatter = GlobalConfiguration.Configuration.Formatters.JsonFormatter; jsonFormatter.SerializerSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ss.fffZ";内加载一个Twitter小部件，但似乎我注入的Javascript因某些原因无效。

我正在做的是异步加载Twitter脚本（函数from here），然后在加载脚本时执行twttr.widgets.load()函数以绘制窗口小部件。

是否可以这样做，或者我使用默认的WebView组件尝试不可能？

这是我的代码：

Webview

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

Answer 2

我像这样一起攻击它并且它主要起作用，虽然高度不变并且不理想：

import React from "react"
import ReactNative from "react-native"

const { View, WebView, StyleSheet, ActivityIndicator } = ReactNative

export default class EmbeddedTweet extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: true,
      embedHtml: null,
    }
  }

  componentDidMount() {
    this.setupEmbed()
  }

  setupEmbed() {
    let tweetUrl =
      "https://publish.twitter.com/oembed?url=" + encodeURIComponent(this.props.url)
    fetch(tweetUrl, { method: "GET", headers: { Accepts: "application/json" } }).then(
      resp => {
        resp.json().then(json => {
          let html = json.html
          this.setState({
            loading: false,
            embedHtml: html,
          })
        })
      }
    )
  }

  renderLoading() {
    if (this.state.loading) {
      return (
        <View style={styles.loadingWrap}>
          <ActivityIndicator />
        </View>
      )
    }
  }

  renderEmbed() {
    if (this.state.embedHtml) {
      let html = `<!DOCTYPE html>\
        <html>\
          <head>\
            <meta charset="utf-8">\
            <meta name="viewport" content="width=device-width, initial-scale=1.0">\
            </head>\
            <body>\
              ${this.state.embedHtml}\
            </body>\
        </html>`
      return (
        <View style={styles.webviewWrap}>
          <WebView source={{ html: html }} style={styles.webview} />
        </View>
      )
    }
  }
  
  render() {
    return (
      <View
        style={[styles.container, { height: this.props.height || 300 }, this.props.style]}
      >
        {this.renderLoading()}
        {this.renderEmbed()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  loadingWrap: {
    flex: 1,
    backgroundColor: "#999",
    justifyContent: "center",
    alignItems: "center",
  },
  webviewWrap: {
    flex: 1,
    borderWidth: 1,
    borderRadius: 4,
    borderColor: "#999",
  },
  webview: {
    flex: 1,
  },
})

React Native中的WebView内的Twitter小部件

2 个答案: