时间戳

首页 > 解决方案 > 错误：反应本机应用程序内的 html 文本内的 Youtube 链接

javascript - 错误：反应本机应用程序内的 html 文本内的 Youtube 链接

问题描述

我在我的应用程序中呈现的一些 html 代码存在一些问题。

我正在获取它并将 html 代码保存在 this.state.text_ 中：

return fetch('https://www.rallyssimo.it/wp-json/wp/v2/posts/'+_links)
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            text_: responseJson.content.rendered,
          },
          function() {}
        );
      })
      .catch(error => {
        console.error(error);
      });

如果我在<Text>标签内打印它，它会正确显示（显然带有 html 标签）。

但是当我尝试使用 react-native-html-render 库渲染它时，如果有一个 youtube 视频的标签，我得到一个错误：invariant violation: WebView has been removed from react native... etc...".

<HTML html={this.state.text_} />

我没有在我的代码中使用 WebView，所以我认为它用于 react-native-html-render 库。

我还尝试使用 react-native-webview 库来呈现 html 代码

<WebView
  source={{ html: this.state.text_ }}
/>

但我得到了一个白屏

标签： javascripthtmlreact-nativewebviewhtml-rendering

解决方案

目前您对此无能为力，webView 已被删除，react-native而react-native-html-render库尚未更新。有修复的 PR 已经合并到 master 中，接下来几天会在 npm 上进行测试和发布。

这是一个未解决的问题：https ://github.com/archriss/react-native-render-html/issues/265

作为等待 pkg 更新时的临时修复，您可以

  • 将 pkg 的版本更改为带有修复的 PR

"react-native-render-html": "^4.1.2"

到

"react-native-render-html": "git+https://github.com/chr314/react-native-render-html.git"

  • 手动安装

    npm install --save react-native-webview react-native 链接 react-native-webview

然后在插件文件夹中，转到src/HTMLRenderers.js，删除 {..} 'react-native' 中的 WebView；并添加这一行 import {WebView} from 'react-native-webview';

推荐阅读