javascript - YGDisplay 'inline ' 无效。应该是 : ( flex, 之一(无)-6ren

javascript - YGDisplay 'inline ' 无效。应该是 : ( flex, 之一(无)

转载作者：行者123 更新时间：2023-12-02 23:35:10

34

4

当我尝试在我的应用程序中打开一个包含 html webview 中照片的帖子时，出现这个奇怪的错误，该应用程序是一个 React Native 应用程序，并从 WordPress 后端检索帖子

/image/iis9O.png

将 View 更改为内联，但没有成功

我的网页 View index.js

/** @format */

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {
  View,
  Image,
  Dimensions,
  Linking,
  WebView,
  WebBrowser,
} from 'react-native'
import HTML from 'react-native-render-html'
import { Tools, Constants, error, warn, Config } from '@common'
import sanitizeHtml from 'sanitize-html'


const { height: PageHeight, width: PageWidth } = Dimensions.get('window')


export default class Index extends PureComponent {
  static propTypes = {
    html: PropTypes.any,
  }

  constructor(props) {
    super(props)
    this.state = { fontSize: Constants.fontText.size }
  }

  async componentWillMount() {
    const fontSize = await Tools.getFontSizePostDetail()

    this.setState({
      fontSize,
    })
  }

  onLinkPress = (url) => {
    if (typeof WebBrowser !== 'undefined') {
      WebBrowser.openBrowserAsync(url)
    } else {
      Linking.canOpenURL(url)
        .then((supported) => {
          if (!supported) {
          } else {
            return Linking.openURL(url)
          }
        })
        .catch((err) => error('An error occurred', err))
    }
  }

  render() {
    const htmlContent = Config.EnableSanitizeHtml ? sanitizeHtml(this.props.html, {
      allowedTags: [ 'b', 'p', 'i', 'img', 'em', 'strong', 'a' ],
      allowedAttributes: {
        'a': [ 'href' ],
        'img' : ['src', 'alt', 'width', 'height']
      },
      allowedIframeHostnames: ['www.youtube.com']
    }) : this.props.html

    const fontSize = this.state.fontSize
      ? this.state.fontSize
      : Constants.fontText.size

    const tagsStyles = {
      a: { color: '#333', fontSize },
      strong: { color: '#333', fontSize, fontWeight: '700' },
      p: { color: '#333', marginBottom: 5, fontSize, lineHeight: 24 },
      em: { fontStyle: 'italic', fontSize },
      video: { marginBottom: 5 },
      img: { resizeMode: 'cover' },
      ul: { color: '#333' },
      li: { color: '#333' },
    }


    const renderers = {
      img: (htmlAttribs, children, convertedCSSStyles, passProps) => {
        const { src, width, height } = htmlAttribs
        if (!src) {
          return false
        }
        const newWidth = Dimensions.get('window').width - 20
        const newHeight = height * newWidth / width
        return (
          <Image
            key={passProps.key}
            source={{ uri: src }}
            style={{
              width: newWidth,
              height: newHeight,
              resizeMode: 'contain',
            }}
          />
        )
      },
      iframe: (htmlAttribs, children, convertedCSSStyles, passProps) => {
        if (htmlAttribs.src) {
          const newWidth = PageWidth
          const width = htmlAttribs.width
          const height = htmlAttribs.height
          const newHeight = height > 0 ? height * newWidth / width : width * 0.7
          const url = htmlAttribs.src

          return (
            <WebView
            renderLoading={() => <ActivityIndicator animating size="large" />}

              originWhitelist={['*']}
              canOpenURL={true}
              key={`webview-${passProps.key}`}
              source={{ uri: url }}
              allowsInlineMediaPlayback={true}
              mediaPlaybackRequiresUserAction={true}
              javaScriptEnabled
              scrollEnabled={false}
              automaticallyAdjustContentInsets
              style={{
                width: PageWidth,
                left: -12,
                height: newHeight + 15,
              }}
            />
          )
        }
      },
    }

    // warn(['content:', htmlContent])
    return (
      <View style={{ 
        padding: 12 }}>
        <HTML
          canOpenURL={true}
          html={Constants.RTL ? `<div style="text-align: left;">${htmlContent}</div>` : htmlContent}
          ignoredStyles={['font-family']}
          renderers={renderers}
          imagesMaxWidth={PageWidth}
          tagsStyles={tagsStyles}
          onLinkPress={(evt, href) => this.onLinkPress(href)}
          staticContentMaxWidth={PageWidth}
        />
      </View>
    )
  }
}

只有在 web View 中包含图像的帖子时，我才会收到此错误

最佳答案

我通过在组件中使用这个 prop allowedStyles={[]} 解决了这个问题

关于javascript - YGDisplay 'inline ' 无效。应该是 : ( flex, 之一(无)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56317643/

34

4

0

文章推荐： javascript - 如何在循环或每个数组元素中使用 .clone() ？

文章推荐： shapefile - 将形状文件导入postgis？

文章推荐： .htaccess - HTACCESS RewriteRule 更改 URL 正常但给出 404 页面

文章推荐： javascript - 使用 jQuery Chosen 时隐藏选择列表选项值

html - css vertical inline 2 inline-blocks in another inline-block
看看这个 fiddle http://jsfiddle.net/9S4zc/2/ 为什么这在 firefox 和 chrome 中看起来不同(文本对齐方式不同) 如何让 inner:before 元素
inline - SWIG : What is the different between "%inline %{ %}" and "%{ %}"?
我从文档中了解到的是 %{ %} 之间的内容。被插入到包装器中，%inline %{ %} 呢？ ? 是一样的吗？如果不是，有什么区别？也许我们可以找到很多%inline %{ %}的出现。但仅出现
html - 为什么 inline-flex/inline-grid 的行为与 contenteditable 中的 inline 不一致？
当我使用显示:inline-flex；或显示:内联网格；似乎有一些额外的“空间”或某种额外的重点计算发生。我不确定到底发生了什么。当使用箭头键在 contentediatble div 中导航
html - 目的 : making div inline. 应显示为 Inline-Flex 或 Inline-block
如果我想让一个 div 与容器 div 的其他内联元素内联，而我的目的仅此而已，我应该更喜欢使用 inline-block 或 display property 还是 inline-flex？不能使用
css - 为什么设置显示:none to an element inside inline-block div make inline-block not render as an inline-block;
这个问题在这里已经有了答案: Why does an inline-block align to top if it has no content? (2 个答案) 关闭 8 年前。
inline - 我可以将 pragma `Inline` 放在正文中而不是规范中吗？
Ada 信息交换所 states the following : The use of pragma Inline does have its disadvantages. It can create
css - 如何获得显示 :inline-block to be inline?
Name
c++ - "inline"关键字与 "inlining"概念
我问这个基本问题是为了让记录更正。已转介 this question和 its currently accepted answer ，这没有说服力。然而second most voted answer
Django 管理员 : update inline based on other inline
你好，在管理面板中，我创建了用于添加产品的表单。表单包括 2 个内联表单集，因为有一些与产品相关的模型。用户可以创建产品，然后定义该产品的不同属性的变体。我将举例说明这一点。用户拥有一个品牌的 3
C++ 编译器不喜欢 "using INLINE = extern inline"
有很多关于 inline 的使用以及如何正确执行此操作以达到所需目的的信息，例如此处(我目前将其用作引用)Inline Functions in C . 当我尝试实现页面中指定的内容时，出现编译器错误
python 风格 : inline function that needs no inlining?
我正在编写 gtk 代码。我经常有不需要闭包的简短回调，因为它们传递了它们需要的所有参数。例如，我在创建一些 gtk.TreeViewColumns 时将其置于循环中: def widthChange
CSS 显示 : inline vs inline-block
这个问题在这里已经有了答案: What is the difference between display: inline and display: inline-block? (7 个答案) 关闭
css - 如何垂直对齐显示 :inline (not inline-block) elements in a div?
我已经搜索了很长时间来找到答案，但是我没有找到解决方案... 我制作了一个无序列表的链接，并将它们放在标题下，就像导航栏一样。然而，在 IE 中(是的那个恶魔..)我的链接似乎没有对齐到中间。下面是我
css - IE7 中的表 inline-block/inline-table
我想将两张 table 并排放置。由于我不是 floating 或使用“css hacks”的忠实拥护者，您有什么建议？没有它是否可以解决，还是我运气不好？最佳答案使用 table-cell显示以
html - 显示跨度 inline-block 与 inline 相结合
这个问题在这里已经有了答案: Why is this inline-block element pushed downward? (8 个答案) 关闭 6 年前。
css - 显示: inline and display: inline-block?有什么区别
CSS display 的 inline 和 inline-block 值到底有什么区别？最佳答案视觉答案想象一个中的元素.如果你给例如，元素高度为 100px 和红色边框，它看起来像这
html - 强制
显示为 :inline instead of inline-block
我想使用 /纯 CSS 弹出窗口的标签，但是表现为内联 block ，我无法将其更改为内联。有没有办法强制表现得像 display:inline 而不是 inline-block？
templates - 我可以将 "inline-template"组件传递给另一个 "inline-template"组件吗？
我的想法是这是不可能的，或者我缺少一个额外的步骤。无论哪种方式，我都被卡住了，无法弄清楚。使用内联模板的原因是能够使用 Laravel Blade 语法并结合 Vue Js 的强大功能。似乎是两者中
css - 对于此页面，为什么我必须使用显示 : inline-block instead of display: inline?
http://christianselig.com/wp/ 对于主导航，如果我使用 display: inline，它们将显示为 block 。我心血来潮添加了 display: inline-blo
css - -moz-inline-box 与 -moz-inline-stack
Firefox 的 -moz-inline-box 和 -moz-inline-stack 专有显示值有什么区别？最佳答案 https://developer.mozilla.org/en/CSS/

首页

博学

6Ren·AI

商城

javascript - YGDisplay 'inline ' 无效。应该是 : ( flex, 之一(无)