HTML 没有显示在 webView 里面 Android

Question

我正在使用 react-native-webview(https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md) 在两者中显示一些 html android 和 ios 台设备。

Webview 在 iOS 上正确显示所有 htmls，但在 android 有一些 htmls 显示不一致。下面是一个在 android 上不显示但在 iOS.

上显示的示例

<!Doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>;</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <h2 dir="auto"><strong style="color: rgb(230, 0, 0); background-color: transparent;" dir="auto">What to See and What to Do In London&nbsp;</strong></h2>
      <p dir="auto" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;" dir="auto">We visited England on such countless events and we love its capital city given the sheer number of marvelous activities in London. During our heartfelt 4 days in London schedule, we invested such a lot of energy simply absorbing what the city brings to the table. London implies a great deal to us too, as this is the city where we requested our wedding bands from. It's likewise the very first city we had a movement date in, with a cool visit around Tate Modern. We are sure you will go gaga for London and will need to return for additional. Also, assuming you visit London with your family, have confidence there are a lot of free London exhibition halls for youngsters too.</span></p>
   </body>
</html>

我的代码：

const {html} = props
    const newHtml = `<h2 dir="auto"><strong style="color: rgb(230, 0, 0); background-color: transparent;" dir="auto">What to See and What to Do In London&nbsp;</strong></h2><p dir='auto' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><span style='font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;' dir='auto'>We visited England on such countless events and we love its capital city given the sheer number of marvelous activities in London. During our heartfelt 4 days in London schedule, we invested such a lot of energy simply absorbing what the city brings to the table. London implies a great deal to us too, as this is the city where we requested our wedding bands from. It's likewise the very first city we had a movement date in, with a cool visit around Tate Modern. We are sure you will go gaga for London and will need to return for additional. Also, assuming you visit London with your family, have confidence there are a lot of free London exhibition halls for youngsters too.</span></p>`
    const htmlStr = '<\!Doctype html><html><head><meta charset="UTF-8"><title>;</title><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>' + html.toString() + '</body></html>'
    const webiewStyle = {...styles.webView, minHeight: (html.length)}
    console.log('htmlStr', htmlStr)
    const [webViewHeight, setWebViewHeight] = useState((html.length))
    const webViewStyle = useMemo(() => ({height: webViewHeight}), [webViewHeight])
    return (
        <View style={styles.container}>
            <WebView
                style={[webiewStyle, webViewStyle]}
                source={{html: htmlStr, baseUrl: ''}}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                scalesPageToFit={true}
                scrollEnabled={false}
                automaticallyAdjustContentInsets={false}
                androidHardwareAccelerationDisabled={true}
                androidLayerType={Platform.OS === 'ios' ? 'hardware' : ''}
                startInLoadingState={true}
                originWhitelist={['*']}
                onMessage={event => { setWebViewHeight(parseInt(event.nativeEvent.data)+10)}}
                injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)'
                // useWebKit={true}
                viewportContent={'width=device-width, user-scalable=no, initial-scale=1.0'}
                onContentProcessDidTerminate={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent
                    console.log('Content process terminated, reloading', nativeEvent)
                    this.refs.webview.reload()
                }}
                onError={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent
                    console.log('WebView error: ', nativeEvent)
                }}
                mixedContentMode={'always'}
                onRenderProcessGone={() => alert('ahooo')}
                overScrollMode={'never'}
            />
        
        </View>
    )

下面的 HTML 对 android 和 [= 都适用52=] 台设备。

<!Doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>;</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <p dir="auto" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-style: normal; font-variant-numeric: normal; font-variant-east-asian: normal;" dir="auto">Thinking about what are the best activities in London? Home to 4 world legacy locales, established by the Romans and the present one of the main monetary center points on the planet, London is an assorted city, known for its craft, culture, religions, and trendy personal areas. London is one of the world's greenest urban communities, home to the notorious Big Ben and the Royal Family. London is a dynamic city, brimming with promising circumstances and probably the coolest spot in Europe. Britain's capital is a flat-out must-see.</span></p>
   </body>
</html>

Answer 1

我找到了解决方案。所以我在 android 上为 WebView 使用了以下道具。我不得不使用 androidLayerType={'hardware'} 但它引入了 android 导航的崩溃问题。所以我在样式中使用了 androidLayerType={'hardware'} 和 opacity: 0.99 。有关更多详细信息，请查看以下代码。

const styles = StyleSheet.create({
    container: {justifyContent: 'center', marginBottom: 10, opacity: 0.99, overflow: 'hidden' , width: '100%'},
    webView: { height: 'auto', marginBottom: 20, marginTop: 20, opacity: 0.99, overflow: 'hidden', width: Metrics.screenWidth - 50 }
})

const HTMLView = props => {
    const {html} = props
    // const newHtml = `<h2 dir="auto"><strong style="color: rgb(230, 0, 0); background-color: transparent;" dir="auto">What to See and What to Do In London&nbsp;</strong></h2><p dir='auto' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><span style='font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;' dir='auto'>We visited England on such countless events and we love its capital city given the sheer number of marvelous activities in London. During our heartfelt 4 days in London schedule, we invested such a lot of energy simply absorbing what the city brings to the table. London implies a great deal to us too, as this is the city where we requested our wedding bands from. It's likewise the very first city we had a movement date in, with a cool visit around Tate Modern. We are sure you will go gaga for London and will need to return for additional. Also, assuming you visit London with your family, have confidence there are a lot of free London exhibition halls for youngsters too.</span></p>`
    const htmlStr = '<\!Doctype html><html><head><meta charset="UTF-8"><title>&nbsp;</title><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>' + html.toString() + '</body></html>'
    const webiewStyle = {...styles.webView, minHeight: (html.length)}

    const [webViewHeight, setWebViewHeight] = useState((html.length))
    const webViewStyle = useMemo(() => ({height: webViewHeight}), [webViewHeight])
    // const webViewStyle = {height: webViewHeight}

    return (
        <View
            style={styles.container}
        >
            {Platform.OS === 'ios' ? <WebView
                style={[webiewStyle, webViewStyle]}
                source={{html: htmlStr, baseUrl: ''}}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                scalesPageToFit={true}
                scrollEnabled={false}
                automaticallyAdjustContentInsets={false}
                startInLoadingState={true}
                originWhitelist={['*']}
                onMessage={event => { setWebViewHeight(parseInt(event.nativeEvent.data)+10)}}
                injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)'
                // useWebKit={true}
                viewportContent={'width=device-width, user-scalable=no, initial-scale=1.0'}
                onContentProcessDidTerminate={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent
                    console.log('Content process terminated, reloading', nativeEvent)
                    this.refs.webview.reload()
                }}
                onError={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent
                    console.log('WebView error: ', nativeEvent)
                }}
            /> : <WebView
                style={[webiewStyle, webViewStyle]}
                source={{html: htmlStr, baseUrl: ''}}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                scalesPageToFit={true}
                nestedScrollEnabled={false}
                automaticallyAdjustContentInsets={false}
                androidHardwareAccelerationDisabled={false}
                androidLayerType={'hardware'}
                startInLoadingState={true}
                originWhitelist={['*']}
                onMessage={event => { setWebViewHeight(parseInt(event.nativeEvent.data)+10)}}
                injectedJavaScript='window.ReactNativeWebView.postMessage(document.body.scrollHeight)'
                useWebKit={true}
                viewportContent={'width=device-width, user-scalable=no, initial-scale=1.0'}
                onContentProcessDidTerminate={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent
                    console.log('Content process terminated, reloading', nativeEvent)
                    this.refs.webview.reload()
                }}
                onError={(syntheticEvent) => {
                    const { nativeEvent } = syntheticEvent
                    console.log('WebView error: ', nativeEvent)
                }}
                mixedContentMode={'always'}
                overScrollMode={'never'}
            />}
        </View>
    )
}

我正在使用 androidLayerType={'hardware'} 和 androidHardwareAccelerationDisabled={false} 这里。（尽管有些解决方案另有建议。）

由于“react-native-youtube-iframe”，我也遇到了崩溃问题，为了解决这个问题，我使用了 opacity: 0.99 for webViewStyle 这个组件中的道具。

我还为项目列表中显示的所有网页视图应用了 opacity:0.99。

HTML 没有显示在 webView 里面 Android

HTML not showing on webView inside Android

webview

android-webview

react-native

react-native-webview