WebView 不会呈现正确的宽度，并且在 React Native 0.63 上没有 height 属性时根本不会呈现答案

【问题标题】：WebView does not render the correct width and does not render at all without a height property on React Native 0.63WebView 不会呈现正确的宽度，并且在 React Native 0.63 上没有 height 属性时根本不会呈现
【发布时间】：2024-04-28 18:45:02
【问题描述】：

我在带有 TypeScript 的 Android 上使用 React Native 0.63，没有博览会，值得一提的是 react-native-orientation-locker。

我做了一个这样的嵌入组件：

const Embed: FC<Props> = ({ embed }: Props) => {
  const { width, height } = useDimensions().window
  console.log(`WIDTH = ${width}`)
  // Return 411

  const getSource = (embedCodeOrURI: string): (WebViewSourceUri & string) | (WebViewSourceHtml & string) => {
    if (embed.startsWith('http')) {
      console.log(`DEBUG > Embed > returned { uri: ${embed}}`)
      return { uri: embedCodeOrURI } as WebViewSourceUri & string
    }
    console.log(`DEBUG > Embed > returned { html: ${embed}}`)
    // If I use the test content, I still need to specify the height in the style prop but the width adjust correctly
    const test =
      '<div style="background-color:red"><p style="font-size:32pt">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>'
    // Using the wrapper or not has zero impact on the bug
    const withWrapper = `
        <!DOCTYPE html>
        <html>
          <head></head>
            <body>
              <div id="baseDiv" style={max-width: 100%;max-height: 100%}>${embedCodeOrURI}</div> 
            </body>
           </html>
        `
    const html = withWrapper
    return { html } as WebViewSourceHtml & string
  }

  if (!embed) {
    console.log(`ERROR > Embed > embed = ${embed}`)
    return null
  }

  return (
    <WebView
      originWhitelist={['*']}
      source={getSource(embed)}
      scalesPageToFit={true}
      containerStyle={{ backgroundColor: 'blue', height: 800 }}
      allowsFullscreenVideo={true}
      onError={(syntheticEvent): void => {
        const { nativeEvent } = syntheticEvent
        console.warn('ERROR > Embed > WebView error: ', nativeEvent)
      }}
      onHttpError={(syntheticEvent): void => {
        const { nativeEvent } = syntheticEvent
        console.warn('ERROR > Embed > WebView http error: ', nativeEvent.statusCode)
      }}
      onRenderProcessGone={(syntheticEvent): void => {
        const { nativeEvent } = syntheticEvent
        console.warn('WebView Crashed: ', nativeEvent.didCrash)
      }}
      onContentProcessDidTerminate={(syntheticEvent): void => {
        const { nativeEvent } = syntheticEvent
        console.warn('ERROR > Embed > Content process terminated: ', nativeEvent)
      }}
      startInLoadingState={true}
      renderLoading={(): ReactElement => <ActivityIndicator />}
    />
  )
}

export default Embed

首先奇怪的是，我测试的 Twitter 或 Instagram 嵌入显示为 411 宽度：

第二个奇怪的事情，如果我使用 useDimensions().window.width (=411) 作为 containerStyle 宽度，这不会改变。

...但是如果我添加 width=600，则视图比例。

第三件事，如果我不指定宽度，测试 html 会显示全宽。

...如果我指定 600，它将超出屏幕：

第四件奇怪的事，如果我不在容器视图中添加高度，html 内容根本不会显示。

【问题讨论】：

标签： react-native react-native-android react-native-webview

【解决方案1】：

我通过在头部添加这个解决了不同比例的问题：

<head>
    <meta charset="utf-8">\
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

我仍然需要指定高度，因此我目前为数据库中的每个帖子手动调整此高度。

【讨论】：