WebView无法呈现正确的宽度，并且在React Native 0.63上没有没有height属性的情况下根本无法呈现

如何解决WebView无法呈现正确的宽度，并且在React Native 0.63上没有没有height属性的情况下根本无法呈现

我在带TypeScript的Android上使用React Native 0.63，没有任何展示，值得一提的是react-native-orientation-locker。

我制作了这样的Embed组件：

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内容根本不会显示。

解决方法

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

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

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