在 android 设备上渲染 webview 与来自同一个父级的先前兄弟级重叠

Posted 2023-05-07

【中文标题】在 android 设备上渲染 webview 与来自同一个父级的先前兄弟级重叠

【英文标题】：Rendering webview on android device overlaps previous siblings from same parent

【发布时间】：2019-03-23 03:30:37

【问题描述】：

反应原生 0.57 集成 RN webview 或react-native-webview@2.4.0

在模拟器上渲染所有兄弟姐妹（文本组件 1 - 3） 在真实设备上，webview 与之前的兄弟姐妹重叠，并且它们不会被渲染。

import React,  Component  from 'react';
import  ScrollView, View, WebView, Text  from 'react-native';

export default class MyWeb extends Component 
  render() 
    return (
      <ScrollView contentContainerStyle= backgroundColor: 'pink', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' >
        <View style=backgroundColor: 'yellow', margin: 5, height: 60, width: 300, alignItems: 'center', justifyContent: 'center' >
          <Text>TEXT COMPONENT 1</Text>
        </View>
        <View style=backgroundColor: 'yellow', height: 60, width: 300, alignItems: 'center', justifyContent: 'center' >
          <Text>TEXT COMPONENT 2</Text>
        </View>
        <View style=flex: 1>
          <WebView
            source= html: '<div>COTENT OF WEBVIEW HERE</div>' 
            // source= uri: 'https://infinite.red/react-native' 
            style=margin: 20, flex :1, height: 250, width: 300, backgroundColor: 'red'
          />
        </View>
        <View style=backgroundColor: 'yellow', height: 100, width: 300, alignItems: 'center', justifyContent: 'center', padding: 10 >
          <Text>TEXT COMPONENT 3</Text>
         </View>
      </ScrollView>
    );
  

React native 0.56 和 0.56 的 webview 完美运行。

但从 0.57 开始，RN 集成 webview 或用作外部依赖项似乎在 android 设备上的每次渲染中都会弄乱所有其他兄弟姐妹。

我尝试了许多选项来调整样式，甚至使用 zIndex 来强制显示某些视图。它们出现了，但渲染的视图仍然是一团糟。

我在这里还添加了一个问题：

https://github.com/react-native-community/react-native-webview/issues/101

【参考方案1】：

将溢出隐藏添加到作为 webview 父级的视图似乎可以解决问题：

        <View style=flex: 1, overflow: 'hidden'>
          <WebView
            source= html: '<div>COTENT OF WEBVIEW HERE</div>' 
            style=margin: 20, flex :1, height: 250, width: 300, backgroundColor: 'red'
          />
        </View>

来源：Titozzz 的回答来自这里：

https://github.com/react-native-community/react-native-webview/issues/101

【参考方案2】：

我刚刚发现这种方法可能会导致某些 Android 设备崩溃（在 Pixel 1、Android Pie 上测试过）

同样的问题可以通过将 WebView 组件的不透明度设置为 0.99 <WebView style= opacity: 0.99 />来解决

Screen blinks once when rendering a WebView on Android